/*
| style de travail minimal (pas un design) : a remplacer par le design d'Etienne
| les balises de base une seule fois, puis les classes reutilisees
*/
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #222; line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
p { margin: 0 0 12px; }
a { color: #1B8CBF; }
img { max-width: 100%; height: auto; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.site-header { border-bottom: 1px solid #ddd; padding: 16px 0; }
.header-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.logo { font-weight: bold; font-size: 20px; text-decoration: none; color: #222; }
.logo img { max-height: 50px; }
.nav a, .langues a, .footer-links a { margin-right: 12px; }
.langues a.active { font-weight: bold; }

.hero { padding: 48px 0; background: #f4f4f4; }
.bloc { padding: 40px 0; }
.intro, .subtitle { color: #555; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.card { display: block; border: 1px solid #ddd; padding: 16px; text-decoration: none; color: inherit; }
.card img { display: block; margin: -16px -16px 12px; max-width: calc(100% + 32px); }
.banner, .hero-pic, .page-pic { display: block; width: 100%; margin-bottom: 20px; }

.cta { display: inline-block; padding: 10px 20px; background: #222; color: #fff; text-decoration: none; border: 0; cursor: pointer; }

.form-contact { display: grid; gap: 12px; max-width: 560px; }
.form-contact label { display: grid; gap: 4px; }
.form-contact input, .form-contact textarea { padding: 8px; border: 1px solid #ccc; font: inherit; }
.message-ok { color: green; }
.message-ko { color: #c00; }

.site-footer { border-top: 1px solid #ddd; padding: 32px 0; margin-top: 40px; font-size: 14px; }