<html>
<head>
<title>style</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="Retour à la ligne automatique">
</head>
<body>
<pre><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="Retour à la ligne automatique">
</head>
<body>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=windows-1252"&gt;
&lt;link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="Retour à la ligne automatique"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre&gt;/* --------- Reset simple --------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background: #fff;
color: #333;
}
/* --------- Header --------- */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #222;
padding: 10px 20px;
}
.site-header .logo img {
height: 50px;
}&lt;br&gt;&lt;br&gt;.baseline {
font-size: 0.8em;
color: #ff8800;
margin-top: 5px;
}
.baseline {
font-size: 0.8em;
color: #ff8800;
margin-top: 5px;
}
.main-nav ul {
list-style: none;
display: flex;
gap: 20px;
}
.main-nav a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
.main-nav a:hover,
.main-nav a.active {
color: #ff8800;
}
/* --------- Hero --------- */
.hero {
background: url('../img/hero-btp.png') center/cover no-repeat;
color: white;
text-align: center;
padding: 100px 20px;
}
.hero-content h1 {
font-size: 2.5em;
margin-bottom: 15px;
}
.hero-content p {
font-size: 1.2em;
margin-bottom: 20px;
}
.cta-btn {
display: inline-block;
background: #ff6600;
color: #fff;
padding: 12px 25px;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
}
.cta-btn:hover {
background: #e65c00;
}
/* --------- Services --------- */
.services {
padding: 50px 20px;
text-align: center;
}
.services h2 {
margin-bottom: 30px;
color: #222;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.service-item {
background: #f9f9f9;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: left;
}
.service-item h3 {
color: #ff6600;
margin-bottom: 10px;
}
.service-item p {
font-size: 0.95em;
color: #555;
}
.service-img {
width: 100%;
aspect-ratio: 4/3; /* force un ratio identique */
object-fit: cover; /* rogne l’image si besoin pour remplir le cadre */
border-radius: 5px;
margin-bottom: 15px;
}
/* --------- Quick Contact --------- */
.quick-contact {
background: #ff8800;
color: #fff;
text-align: center;
padding: 40px 20px;
}
.linkedin-btn {
display: inline-block;
background: #0077b5;
color: #fff;
padding: 10px 20px;
margin-top: 15px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
}
.linkedin-btn:hover {
background: #005983;
}
/* --------- FAQ --------- */
.faq {
padding: 50px 20px;
}
.faq h2 {
text-align: center;
margin-bottom: 30px;
}
.faq-item {
margin-bottom: 20px;
}
.faq-item h3 {
color: #ff6600;
margin-bottom: 8px;
}
/* --------- Form --------- */
.contact-form {
background: #f4f4f4;
padding: 50px 20px;
}
.contact-form h2 {
text-align: center;
margin-bottom: 20px;
}
form {
max-width: 600px;
margin: auto;
display: flex;
flex-direction: column;
}
form label {
margin-top: 10px;
margin-bottom: 5px;
}
form input, form textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
form textarea {
min-height: 120px;
}
form button {
margin-top: 20px;
padding: 12px;
background: #ff6600;
color: #fff;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
form button:hover {
background: #e65c00;
}
/* --------- Footer --------- */
.site-footer {
background: #222;
color: #fff;
text-align: center;
padding: 20px;
margin-top: 40px;
}
.site-footer img {
height: 40px;
margin-bottom: 10px;
}
.site-footer a {
color: #ff8800;
text-decoration: none;
}
.site-footer a:hover {
text-decoration: underline;
}
&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</body>
</html>
</pre>
</body>
</html>