/* ====== VARIABLES ====== */
:root{
  --brand:#0e72b0;  /* bleu titres */
  --text:#000;      /* texte noir demandé */
  --muted:#555;
  --bg:#fff;
  --border:#eee;
  --maxw:1000px;    /* largeur de page */
  --cardw:800px;    /* largeur des blocs de contenu (tarifs, etc.) */
  --radius:8px;
}

/* ====== BASE ====== */
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: Verdana, Calibri, Arial, sans-serif;
  line-height:1.4;
}

/* Centrage global des zones principales */
.container,
.content,
.header,
.nav,
.footer{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* ====== TITRES (balises & classes) ====== */
h1,h2,h3,h4,h5,h6,
.titre1,.titre2,.titre3,.titre4,.titre5{
  color: var(--brand);
  margin: 36px 0 16px;
  line-height: 1.4;
  text-align: center;         /* titres centrés */
}

/* tailles harmonisées */
h1,.titre1{ font-size:22px; font-weight:700; }
h2,.titre2{ font-size:19px; font-weight:700; }
h3,.titre3{ font-size:16px; }
h4,.titre4{ font-size:16px; }
h5,.titre5{ font-size:20px; font-weight:700; }
h6,.titre6{ font-size:20px; font-weight:700; text-align: left;}

/* ====== TEXTE ====== */
p{ margin:14px 0; }
.texte1{ font-size:14px; }
.texte2{ font-size:14px; }

/* ====== LIENS ====== */
a img{ border:none; }
a:link, a:visited{ color: var(--brand); text-decoration:none; }
a:hover, a:active, a:focus{ text-decoration: underline; }

/* Email spécifique */
.mail-link{ color: var(--brand); text-decoration:none; }
.mail-link:hover{ text-decoration:underline; }

/* ====== IMAGES & SECTIONS ====== */
/* Toutes les images centrées et responsives */
img{
  display:block;
  margin: 20px auto;     /* centre toutes les images */
  max-width:100%;
  height:auto;
  border-radius:6px;
}

/* sections de contenu */
.section{ margin: 24px auto 40px; text-align:center; }

/* ====== BLOCS (ex: tarifs) ====== */
.card, .tarif-block{
  max-width: var(--cardw);
  margin: 0 auto 40px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
}
.card h3, .tarif-block h3{ margin: 0 0 10px; text-align:center; }

/* ====== LISTES ====== */
ul{ margin:16px 0 16px 30px; padding:0; }
li{ margin:8px 0; line-height:1.4; }

/* ====== HEADER BAR ====== */
.header { background: #fff; }

.header-bar {
  display: flex;
  justify-content: space-between;  /* Logo à gauche / Contacts à droite */
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1px 2px;
}

/* Logo */
.header-logo img {
  display: block;
  max-height: 159px;
}

/* ====== CONTACTS ====== */
.header-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 20px;
  line-height: 1;     /* interligne serré */
}

.header-contacts p,
.header-contacts .contact-item {
  margin: 0;
  padding: 0;
}

.header-contacts .contact-item + .contact-item {
  margin-top: -4px; /* rapproche encore téléphone et mail */
}

.header-contacts .contact-title {
  font-size: 14px;
  margin: 0 0 2px;  /* petit espace seulement sous le titre */
}

.header-contacts .contact-item a {
  cursor: pointer;
  display: flex;          /* icône + texte ensemble */
  align-items: center;
  gap: 6px;
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.25s ease;
  padding: 2px 4px;       /* réduit la zone cliquable pour coller les lignes */
}

.header-contacts .contact-item a:hover {
  color: #09527e;
  text-decoration: underline;
  font-weight: bold;
}

.header-contacts .contact-item a .icon {
  width: 32px;
  height: 32px;
  transition: transform 0.25s ease;
}

.header-contacts .contact-item a:hover .icon {
  transform: scale(1.05);
}

/* Responsive : logo au-dessus et contacts centrés */
@media (max-width: 600px) {
  .header-bar {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .header-contacts { align-items: center; }
}

/* ====== NAVIGATION ====== */
/* Barre de navigation */
.navbar {
  background-color: #0e72b0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 2px;
}

/* Liens du menu */
.navbar a {
  color: white;
  text-decoration: none;
  padding: 2px 50px;           /* espace autour du texte */
  font-size: 18px;
  display: block;
}

.navbar a:hover {
  background-color: #09527e;
  border-radius: 10px;          /* petit arrondi sur hover */
}

/* ====== FOOTER (compact) ====== */
.footer {
  background: var(--brand);
  color:#fff;
  padding: 2px 12px;
  margin-top: 4px;
  text-align:center;
  font-size:13px;
  line-height:1.4;
}
.footer a { color:#FFD700; }
.footer a:hover { text-decoration:underline; }
.footer a.footer-link { color:#fff; }
.footer a.footer-legal {
  color:#FFD700;
  margin:0 6px;
  font-weight:600;
  font-size:12px;
}

/* ====== COOKIE BANNER ====== */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0;
  background: var(--brand); color:#fff; text-align:center;
  padding:12px; font-size:15px; z-index:9999;
}
.cookie-banner p{ margin:0; }
.cookie-banner button{
  margin-left:15px; padding:6px 14px; border:none;
  background:#FFD700; color:#000; font-weight:700; border-radius:4px; cursor:pointer;
}
.cookie-banner button:hover{ background:#e6c200; }

/* ====== RESPONSIVE ====== */
/* Mobile (≤600px) */
@media (max-width:600px){
  .container,.content,.header,.nav,.footer{ padding:0 10px; }
  h1,.titre1{ font-size:22px; }
  h2,.titre2{ font-size:19px; }
  .texte1{ font-size:16px; }
  .texte2{ font-size:15px; }
  .navbar{ flex-wrap: wrap; gap: 10px; }
  .navbar a{ padding:10px 14px; }
}
/* Tablette (601–991px) */
@media (min-width:601px) and (max-width:991px){
  .container{ max-width:90%; }
  h1,.titre1{ font-size:26px; }
  h2,.titre2{ font-size:22px; }
  .texte1{ font-size:15px; }
}
/* PC (≥992px) */
@media (min-width:992px){
  /* tailles déjà définies plus haut */
}

/* Élargir proprement sur grands écrans */
@media (min-width: 1200px){
  :root{
    --maxw: 1200px;
    --cardw: 1000px;
  }
}
@media (min-width: 1536px){
  :root{
    --maxw: 1400px;
    --cardw: 1100px;
  }
}

/* ====== CHARTE QUALITÉ ====== */
.quality { 
  display: grid;
  gap: 20px;
  margin: 30px auto;
  max-width: 1000px;
  grid-template-columns: 1fr;                 /* mobile: 1 */
}
.quality .q-item {
  text-align: center;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
}
.quality .q-item img {
  width: 60px;
  height: auto;
  margin: 10px auto;
  display: block;
}
.quality .q-item h3 {
  margin: 10px 0 6px;
  color: var(--brand);
  font-size: 18px;
}
.quality .q-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 600px){ 
  .quality { grid-template-columns: repeat(2, minmax(0,1fr)); }   /* tablette/desktop: 2 */
}
@media (min-width: 1200px){
  .quality { grid-template-columns: repeat(3, minmax(0,1fr)); }   /* grands écrans: 3 */
}

/* ====== SECTION AVIS ====== */
.avis {
  text-align: center;
  max-width: var(--cardw);   /* même largeur que .card */
  margin: 0 auto 40px;       /* centrée et espace en bas */
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
}
.avis h2 { margin-bottom: 20px; }
.avis-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;                 /* mobile: 1 */
}
.avis-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 14px;
  font-style: italic;
}
.avis-text { margin: 0 0 8px; }
.avis-auteur { margin: 0; font-weight: bold; color: var(--brand); }
.avis-cta a {
  display: inline-block;
  margin-top: 20px;
  background: var(--brand);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.avis-cta a:hover { background: #09527e; }

@media (min-width: 600px){
  .avis-list { grid-template-columns: repeat(2, minmax(0,1fr)); } /* tablette/desktop: 2 */
}
@media (min-width: 1200px){
  .avis-list { grid-template-columns: repeat(3, minmax(0,1fr)); } /* grands écrans: 3 */
}