/* CLIMATRANS — site vitrine (30/10/2026). Repris de la maquette Claude Design. */
:root{
  --encre:#0A2233; --texte:#4A5D6C; --doux:#6A7C8B; --bleu:#0B6FB8; --bleu-fonce:#08467A;
  --glace:#EEF4F9; --trait:#C2D3E0; --blanc:#FFFFFF; --nuit:#0A2233; --ciel:#5FA8DE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:#0B5E9C}a:hover{color:var(--bleu-fonce)}
h1,h2,h3{font-family:Manrope,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;margin:0}
.conteneur{max-width:1240px;margin:0 auto;padding-left:28px;padding-right:28px}
.a-completer{background:#FFE08A;color:#3A2A00;padding:0 6px;border-radius:4px;font-weight:600;letter-spacing:0}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.btn-plein{background:var(--bleu);color:#FFFFFF}.btn-plein:hover{background:var(--bleu-fonce);color:#FFFFFF}
.btn-trait{color:#FFFFFF;border:1.5px solid #FFFFFF;background:transparent}.btn-trait:hover{background:#FFFFFF;color:var(--encre)}

/* Accueil */
.heros{position:relative;min-height:min(100svh,860px);min-height:760px;color:#FFFFFF;overflow:hidden;display:flex;flex-direction:column}
.heros video,.heros .heros-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.voile{position:absolute;inset:0;background:rgba(6,22,36,.52)}
.entete{position:relative;width:100%;padding-top:26px;padding-bottom:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.marque{color:#FFFFFF;text-decoration:none;font-family:Manrope,sans-serif;font-weight:800;font-size:24px;letter-spacing:.14em}
.marque:hover{color:#FFFFFF}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;font-size:15px;font-weight:500}
.nav a{color:#D9E6F0;text-decoration:none;padding:10px 0}.nav a:hover{color:#FFFFFF}
.nav .btn{min-height:44px;padding:0 20px;font-size:15px}
.heros-corps{position:relative;flex-grow:1;padding-top:80px;padding-bottom:72px;display:flex;flex-direction:column;justify-content:flex-end;gap:26px}
.heros h1{max-width:900px;font-size:76px;line-height:1.02}
.heros-texte{margin:0;max-width:620px;font-size:20px;color:#E4EEF5}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.heros-garanties{margin:18px 0 0;font-size:14px;letter-spacing:.06em;color:#C6D8E6}

/* Sections */
.section{padding-top:110px;padding-bottom:110px}
.tete-section{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:44px}
.tete-section h2{max-width:640px;font-size:50px;line-height:1.05}
.tete-section p{margin:0;max-width:420px;font-size:17px;color:var(--texte)}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.carte{text-decoration:none;color:var(--encre);display:flex;flex-direction:column;gap:16px}
.carte:hover{color:var(--encre)}
.carte .photo{height:360px;border-radius:22px;overflow:hidden}
.carte img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.carte:hover img{transform:scale(1.04)}
.carte strong{font-family:Manrope,sans-serif;font-size:22px;display:block;margin-bottom:6px}
.carte span{color:var(--texte)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:56px;align-items:center}
.duo .photo{border-radius:28px;overflow:hidden;height:560px}
.duo .photo img{width:100%;height:100%;object-fit:cover}
.duo h2{font-size:46px;line-height:1.06}
.duo p{font-size:18px;color:var(--texte);margin:0}
.pile{display:flex;flex-direction:column;gap:22px}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;margin-top:8px}
.points div{border-top:2px solid var(--encre);padding-top:14px}
.points strong{display:block;font-family:Manrope,sans-serif;font-size:18px;margin-bottom:6px}
.points span{color:var(--texte)}
.sombre{background:var(--nuit);color:#FFFFFF}
.sombre h2{max-width:700px;font-size:50px;line-height:1.05;margin-bottom:56px}
.etapes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px}
.etapes li{display:flex;flex-direction:column;gap:12px;border-top:1px solid #36506A;padding-top:22px}
.etapes .num{font-family:Manrope,sans-serif;font-weight:800;font-size:56px;line-height:1;color:var(--ciel)}
.etapes strong{font-size:20px}
.etapes span:last-child{color:#B8CADA}
.aides{background:var(--glace);border-radius:32px;padding:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px}
.aides h2{font-size:42px;line-height:1.08}
.aides p{color:var(--texte);margin:0}
.liste-aides div{padding:18px 0;border-bottom:1px solid #CCDCE8}
.liste-aides div:last-child{border-bottom:0}
.liste-aides strong{font-family:Manrope,sans-serif;font-size:19px}
.liste-aides p{margin:6px 0 0}
.zone{position:relative;min-height:520px;color:#FFFFFF;overflow:hidden;display:flex}
.zone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zone .contenu{position:relative;width:100%;padding-top:90px;padding-bottom:90px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.zone h2{max-width:760px;font-size:54px;line-height:1.04}
.zone p{margin:0;max-width:620px;font-size:19px;color:#E4EEF5}
.contact-label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.contact-tel{text-decoration:none;font-family:Manrope,sans-serif;font-weight:800;font-size:32px;color:var(--encre)}
.formulaire{background:var(--glace);border-radius:28px;padding:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.formulaire label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px}
.formulaire .large{grid-column:1/-1}
.formulaire input,.formulaire select,.formulaire textarea{font:inherit;font-weight:400;font-size:16px;padding:14px 16px;border:1px solid var(--trait);border-radius:14px;background:#FFFFFF;min-height:48px;width:100%;color:var(--encre)}
.formulaire textarea{resize:vertical}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:3px solid #9CC3E3;outline-offset:1px}
.formulaire .case{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13px;color:var(--texte)}
.formulaire .case input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none}
.formulaire .piege{position:absolute;left:-9999px}
.message{grid-column:1/-1;margin:0;font-size:15px}
.message.ok{color:#14532D}.message.erreur{color:#9F1D1D}
.merci{background:var(--glace);border-radius:28px;padding:44px}
.pied{background:var(--nuit);color:#B8CADA;font-size:14px;line-height:1.75}
.pied .grille{padding-top:64px;padding-bottom:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px}
.pied strong{color:#FFFFFF}
.pied a{color:#B8CADA}.pied a:hover{color:#FFFFFF}
.pied .colonne{display:flex;flex-direction:column;gap:6px}
.pied .bas{padding-bottom:28px;font-size:13px;color:#7F95A8}

/* Pages légales */
.page-texte{max-width:820px;margin:0 auto;padding:64px 28px 96px}
.page-texte h1{font-size:44px;margin-bottom:28px}
.page-texte h2{font-size:24px;margin:36px 0 10px}
.page-texte p,.page-texte li{color:var(--texte)}
.barre{background:var(--nuit)}
.barre .entete{padding-top:20px;padding-bottom:20px}

/* Téléphone et tablette */
@media (max-width:900px){
  .heros h1{font-size:52px}
  .tete-section h2,.sombre h2{font-size:38px}
  .duo h2,.aides h2{font-size:34px}
  .zone h2{font-size:40px}
  .duo .photo{height:400px}
  .section{padding-top:76px;padding-bottom:76px}
}
@media (max-width:600px){
  .conteneur{padding-left:16px;padding-right:16px}
  .heros{min-height:640px}
  .heros h1{font-size:40px}
  .heros-texte{font-size:17px}
  .nav{gap:2px 18px}
  .nav a:not(.btn){display:none}
  .tete-section h2,.sombre h2{font-size:32px}
  .duo{grid-template-columns:1fr;gap:32px}
  .duo .photo{height:300px}
  .carte .photo{height:260px}
  .points{grid-template-columns:1fr}
  .aides{padding:28px 20px;grid-template-columns:1fr}
  .zone h2{font-size:32px}
  .contact-tel{font-size:26px}
  .formulaire{padding:22px 16px}
  .page-texte h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){.carte img{transition:none}html{scroll-behavior:auto}}