/* ProClean Solaire - feuille de style unique.
   Palette relevee sur le logo : marine #022C56, bleu #02ABF0, ambre #FDB522. */

:root{
  --marine:#022C56;
  --marine-900:#011E3C;
  --marine-700:#063C71;
  --bleu:#02ABF0;
  --bleu-700:#0289C0;
  --ambre:#FDB522;
  --ciel:#F3F8FD;
  --brume:#DFE9F4;
  --bord:#CBD9E8;
  --encre:#0A1826;
  --gris:#53687D;
  --blanc:#FFFFFF;
  --ombre:0 1px 2px rgba(2,44,86,.06), 0 8px 24px rgba(2,44,86,.07);
  --ombre-forte:0 2px 4px rgba(2,44,86,.08), 0 18px 48px rgba(2,44,86,.14);
  --rayon:14px;
  --large:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--blanc); color:var(--encre);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--bleu-700); text-decoration-thickness:1px; text-underline-offset:2px}
h1,h2,h3,h4{
  font-family:Archivo,"IBM Plex Sans",system-ui,sans-serif;
  font-weight:800; line-height:1.12; letter-spacing:-.02em;
  text-wrap:balance; margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.1vw,2.35rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.3rem); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--ambre); outline-offset:2px; border-radius:4px}

.enveloppe{width:100%; max-width:var(--large); margin:0 auto; padding:0 20px}
.section{padding:clamp(48px,7vw,86px) 0}
.section--ciel{background:var(--ciel)}
.section--marine{background:var(--marine); color:#DCE8F5}
.section--marine h2,.section--marine h3{color:#fff}

.surtitre{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bleu-700);
  margin:0 0 .6em;
}
.section--marine .surtitre{color:var(--ambre)}
.chapeau{font-size:1.08rem; color:var(--gris); max-width:66ch}
.section--marine .chapeau{color:#AFC5DC}
.centre{text-align:center}
.centre .chapeau{margin-left:auto; margin-right:auto}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:1rem;
  padding:14px 22px; border-radius:10px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.bouton:active{transform:translateY(1px)}
.bouton--tel{background:var(--ambre); color:var(--marine-900); box-shadow:0 4px 0 #D4931A}
.bouton--tel:hover{background:#FFC648}
.bouton--devis{background:var(--bleu); color:#fff}
.bouton--devis:hover{background:var(--bleu-700)}
.bouton--fantome{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.bouton--fantome:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.bouton--clair{background:var(--marine); color:#fff}
.bouton--clair:hover{background:var(--marine-700)}
.ico{width:19px; height:19px; flex:0 0 auto; stroke:currentColor; fill:none;
     stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- bandeau + entete ---------- */
.bandeau{background:var(--marine-900); color:#BFD4E9; font-size:.86rem; padding:7px 0}
.bandeau .enveloppe{display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center; align-items:center}
.bandeau span{display:inline-flex; align-items:center; gap:7px}
.bandeau .ico{width:15px; height:15px; stroke:var(--ambre)}

.entete{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
        backdrop-filter:blur(8px); border-bottom:1px solid var(--bord)}
.entete .enveloppe{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:10px; padding-bottom:10px}
.marque{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--marine); min-width:0}
.marque img{width:54px; height:54px; flex:0 0 auto; object-fit:contain}
.marque b{font-family:Archivo,sans-serif; font-weight:800; font-size:1.13rem; letter-spacing:-.02em; line-height:1.1; display:block}
.marque small{display:block; font-size:.74rem; color:var(--gris); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.nav{display:flex; align-items:center; gap:22px}
.nav a{color:var(--marine); font-weight:600; font-size:.95rem; text-decoration:none}
.nav a:hover{color:var(--bleu-700)}
.entete-actions{display:flex; align-items:center; gap:10px}
.entete .bouton{padding:11px 17px; font-size:.95rem}
@media (max-width:980px){ .nav{display:none} }
@media (max-width:520px){ .entete-tel-texte{display:none} .marque small{display:none} }

/* ---------- heros ---------- */
.hero{position:relative; background:var(--marine); color:#fff; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,var(--marine) 0%,var(--marine) 46%,rgba(2,44,86,.72) 60%,rgba(2,44,86,.15) 100%);
  pointer-events:none;
}
.hero-image{position:absolute; inset:0 0 0 auto; width:58%; height:100%; object-fit:cover; object-position:center}
.hero .enveloppe{position:relative; z-index:2; padding-top:clamp(52px,7vw,92px); padding-bottom:clamp(52px,7vw,92px)}
.hero-texte{max-width:640px}
.hero h1{color:#fff; margin-bottom:.4em}
.hero h1 em{font-style:normal; color:var(--bleu); display:block}
.hero-chapeau{font-size:1.14rem; color:#C6D8EB; max-width:56ch; margin-bottom:1.6em}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero-preuves{display:flex; gap:10px 30px; flex-wrap:wrap; font-size:.94rem; color:#AFC5DC; padding-top:20px; border-top:1px solid rgba(255,255,255,.16)}
.hero-preuves span{display:inline-flex; align-items:center; gap:8px}
.hero-preuves .ico{stroke:var(--ambre); width:17px; height:17px}
@media (max-width:900px){
  .hero-image{position:relative; width:100%; height:230px}
  .hero::after{background:linear-gradient(180deg,rgba(2,44,86,.25),var(--marine) 78%)}
  .hero .enveloppe{padding-top:36px}
}

.hero--page{background:var(--marine); padding:clamp(34px,5vw,58px) 0 clamp(30px,4vw,48px)}
.hero--page h1{color:#fff; margin-bottom:.35em}
.hero--page .chapeau{color:#B9CFE6; margin-bottom:1.3em}
.fil{font-size:.85rem; color:#8FAAC6; margin-bottom:1.1em}
.fil a{color:#B9CFE6; text-decoration:none}
.fil a:hover{text-decoration:underline}

/* ---------- grilles et cartes ---------- */
.grille{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.carte{
  background:#fff; border:1px solid var(--bord); border-radius:var(--rayon);
  padding:26px; box-shadow:var(--ombre); display:flex; flex-direction:column;
}
.carte h3{margin-bottom:.45em}
.carte p{color:var(--gris); margin-bottom:0}
.carte-lien{margin-top:auto; padding-top:16px; font-weight:700; font-family:Archivo,sans-serif;
            color:var(--bleu-700); text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.carte-lien:hover{gap:11px}
.pastille{
  width:48px; height:48px; border-radius:12px; background:var(--ciel);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex:0 0 auto;
}
.pastille .ico{width:24px; height:24px; stroke:var(--bleu-700)}

.carte-photo{padding:0; overflow:hidden}
.carte-photo img{width:100%; aspect-ratio:3/2; object-fit:cover}
.carte-photo-corps{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}

/* ---------- duo texte + image ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:center}
.duo--inverse .duo-media{order:-1}
.duo-media img{width:100%; border-radius:var(--rayon); box-shadow:var(--ombre-forte); aspect-ratio:4/3; object-fit:cover}
.duo-media figcaption{font-size:.85rem; color:var(--gris); margin-top:10px}
.section--marine .duo-media figcaption{color:#8FAAC6}
@media (max-width:820px){ .duo{grid-template-columns:1fr} .duo--inverse .duo-media{order:0} }

/* ---------- liste a coches ---------- */
.coches{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.coches li{display:flex; gap:11px; align-items:flex-start}
.coches .ico{width:20px; height:20px; margin-top:3px; stroke:var(--bleu)}
.section--marine .coches .ico{stroke:var(--ambre)}

/* ---------- etapes ---------- */
.etapes{counter-reset:e; display:grid; gap:20px; grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .etapes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .etapes{grid-template-columns:1fr} }
.etape{position:relative; padding-top:52px}
.etape::before{
  counter-increment:e; content:counter(e,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:Archivo,sans-serif; font-weight:800; font-size:1.05rem;
  width:40px; height:40px; border-radius:11px;
  background:var(--ambre); color:var(--marine-900);
  display:flex; align-items:center; justify-content:center;
}
.etape h3{font-size:1.12rem}
.etape p{color:#AFC5DC; font-size:.97rem; margin:0}

/* ---------- villes ---------- */
.villes{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:900px){ .villes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .villes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:400px){ .villes{grid-template-columns:1fr} }
.ville-lien{
  display:flex; flex-direction:column; gap:1px; padding:13px 15px;
  background:#fff; border:1px solid var(--bord); border-radius:10px;
  text-decoration:none; color:var(--marine); font-weight:600;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ville-lien:hover{border-color:var(--bleu); transform:translateY(-2px); box-shadow:var(--ombre)}
.ville-lien small{color:var(--gris); font-weight:500; font-size:.8rem}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px; max-width:860px; margin:0 auto}
.faq details{background:#fff; border:1px solid var(--bord); border-radius:12px; padding:0}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:700;
  font-family:Archivo,sans-serif; font-size:1.03rem; color:var(--marine);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--bleu); line-height:1; flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq .reponse{padding:0 22px 20px; color:var(--gris)}
.faq .reponse p:last-child{margin-bottom:0}

/* ---------- formulaire ---------- */
.devis{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start}
@media (max-width:820px){ .devis{grid-template-columns:1fr} }
.formulaire{background:#fff; border:1px solid var(--bord); border-radius:var(--rayon); padding:clamp(22px,3vw,32px); box-shadow:var(--ombre-forte)}
.champ{margin-bottom:15px}
.champ label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--marine)}
.champ input,.champ select,.champ textarea{
  width:100%; padding:12px 14px; border:1px solid var(--bord); border-radius:9px;
  font:inherit; font-size:1rem; color:var(--encre); background:#fff;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu); outline:none; box-shadow:0 0 0 3px rgba(2,171,240,.16)}
.champ textarea{min-height:104px; resize:vertical}
.champ--duo{display:grid; grid-template-columns:1fr 1fr; gap:15px}
@media (max-width:480px){ .champ--duo{grid-template-columns:1fr} }
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formulaire .bouton{width:100%; margin-top:6px}
.mention{font-size:.82rem; color:var(--gris); margin:12px 0 0}
.retour{margin-top:14px; padding:12px 14px; border-radius:9px; font-size:.94rem; display:none}
.retour--ok{display:block; background:#E6F7EC; color:#136B33; border:1px solid #A9DFBE}
.retour--ko{display:block; background:#FDECEC; color:#8A1C1C; border:1px solid #F3B9B9}

/* ---------- rappel telephone ---------- */
.rappel{background:var(--marine-900); color:#fff}
.rappel .enveloppe{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-top:40px; padding-bottom:40px}
.rappel h2{margin-bottom:.25em}
.rappel p{color:#AFC5DC; margin:0; max-width:52ch}

/* ---------- pied ---------- */
.pied{background:var(--marine); color:#A9C2DA; font-size:.93rem; padding:52px 0 26px}
.pied a{color:#D5E4F2; text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied h4{color:#fff; font-family:Archivo,sans-serif; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; margin:0 0 14px}
.pied-grille{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px}
@media (max-width:860px){ .pied-grille{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .pied-grille{grid-template-columns:1fr} }
.pied ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
/* Le panneau du logo est exactement le marine du pied de page : pose tel quel
   il disparaitrait dans le fond. Il repose donc sur une pastille blanche. */
.pied-marque{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.pied-pastille{background:#fff; border-radius:13px; padding:7px; display:flex; flex:0 0 auto}
.pied-marque img{width:48px; height:48px; display:block; object-fit:contain}
.pied-marque b{color:#fff; font-family:Archivo,sans-serif; font-size:1.18rem; letter-spacing:-.02em}
.pied-bas{border-top:1px solid rgba(255,255,255,.14); margin-top:38px; padding-top:20px;
          display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.86rem; color:#8FAAC6}
.pied-villes{font-size:.86rem; line-height:1.9}
.pied-villes a{color:#A9C2DA}

/* ---------- barre mobile ---------- */
.barre-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border-top:1px solid var(--bord); padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:9px;
}
.barre-mobile .bouton{flex:1; padding:13px 10px; font-size:.97rem}
@media (max-width:760px){ .barre-mobile{display:flex} body{padding-bottom:74px} }

/* ---------- apparition ---------- */
/* L'animation ne masque le contenu que si le script tourne. Sans JavaScript,
   ou si le script echoue, tout reste visible : rien ne depend de l'animation. */
.js .apparait{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.js .apparait.vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1; transform:none; transition:none}
  *{scroll-behavior:auto !important}
}