/* =============================================================
   H2O Plomberie — feuille de style unique
   Aucun framework, aucune dépendance. Modifiable au bloc-notes.
   ============================================================= */

/* --- 1. Couleurs et réglages globaux -------------------------
   Pour changer une couleur partout sur le site, modifiez sa
   valeur ici et nulle part ailleurs. */
:root {
  --nuit:        #00355C;  /* fond principal */
  --nuit-fonce:  #00243F;  /* bandeaux, pied de page */
  --or:          #C7A263;  /* accent : boutons, chiffres, filets */
  --or-clair:    #E3C88F;  /* accent au survol */
  --bleu-marque: #006FBF;  /* bleu du logo, section claire */
  --bleu-voile:  #EAF4FD;  /* fond de la section conciergerie */
  --texte:       #E8EFF6;
  --texte-doux:  #B9CBDC;
  --texte-faible:#8FB4D6;
  --encre:       #0F1720;  /* texte sur fond clair */
  --gris-texte:  #5A6672;
  --bordure:     rgba(143, 180, 214, 0.22);
  --bordure-or:  rgba(199, 162, 99, 0.35);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --largeur: 1240px;
}

* { box-sizing: border-box; }

/* Garde-fou anti-débordement horizontal.
   Les enfants de grille et de flex ont par défaut min-width:auto, qui vaut
   la largeur intrinsèque du contenu. Une photo de 1200 px de large impose
   alors sa taille à la colonne et fait déborder la page sur téléphone. */
.hero > *, .interventions > *, .galerie > *, .contact > *,
.artisan > *, .pied__grille > *, .clair > .conteneur > *,
.regle__grille > *, .arguments > * { min-width: 0; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  margin: 0;
  letter-spacing: -0.02em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--or); }
a:hover { color: var(--or-clair); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; }

/* Lien d'évitement pour la navigation au clavier */
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--or); color: var(--nuit-fonce);
  padding: 12px 20px; border-radius: 0 0 8px 0; text-decoration: none;
}
.saut:focus { left: 0; }

/* --- 2. Intertitre de section (filet + petites capitales) ---- */
.surtitre { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.surtitre::before {
  content: ""; width: 32px; height: 1px; background: var(--or); flex: 0 0 auto;
}
.surtitre span {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texte-faible);
}
.surtitre--clair::before { background: var(--bleu-marque); }
.surtitre--clair span { color: var(--bleu-marque); }

/* --- 3. Boutons --------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 16px 28px; border-radius: 999px;
  font-size: 17px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.bouton--plein { background: var(--or); color: var(--nuit-fonce); }
.bouton--plein:hover { background: var(--or-clair); color: var(--nuit-fonce); }
.bouton--contour { border-color: rgba(199, 162, 99, 0.5); color: #fff; font-weight: 400; }
.bouton--contour:hover { border-color: var(--or); color: #fff; }
.bouton--bleu { background: var(--nuit); color: #fff; font-weight: 500; }
.bouton--bleu:hover { background: var(--bleu-marque); color: #fff; }

/* --- 4. Barre de navigation flottante ----------------------- */
.nav-zone {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; padding: 0 14px; pointer-events: none;
}
.nav {
  pointer-events: auto; width: 100%; max-width: 1120px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding: 8px 12px 8px 16px;
  border: 1px solid var(--bordure-or); border-radius: 999px;
  background: rgba(0, 32, 56, 0.82);
  backdrop-filter: saturate(140%) blur(6px);
}
/* Le logo utilisé sur le site est une version éclaircie du logo d'origine :
   mêmes teintes, remontées vers le clair pour rester lisibles sur le bleu
   nuit du fond. Le fichier d'origine reste dans assets/. */
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { width: auto; height: 80px; }
.nav__liens {
  flex: 1 1 300px; display: flex; justify-content: center; gap: 22px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.nav__liens a { color: var(--texte-doux); text-decoration: none; white-space: nowrap; }
.nav__liens a:hover { color: #fff; }
.nav__tel {
  flex: 0 0 auto; background: var(--or); color: var(--nuit-fonce);
  text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
}
.nav__tel:hover { background: var(--or-clair); color: var(--nuit-fonce); }

/* --- 5. Hero ------------------------------------------------ */
.hero {
  position: relative; isolation: isolate;
  max-width: var(--largeur); margin: 0 auto;
  padding: clamp(120px, 13vw, 180px) 20px clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 56px); align-items: end;
}
.hero__fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero__fond svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__halo {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 260ms ease;
}
.hero__texte { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.02; color: #fff; }
.hero__accroche { margin-top: 26px; font-size: 19px; color: var(--texte-doux); max-width: 500px; }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__mention { margin-top: 20px; font-size: 15px; color: var(--texte-faible); }
.hero__photo {
  position: relative; z-index: 1; width: 100%; height: auto; max-width: min(420px, 100%);
  aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; justify-self: end;
}

/* Mise en valeur d'un mot dans un titre */
.accent { font-style: normal; color: var(--or); }

/* --- 6. Bandeau de réassurance ------------------------------ */
.regle {
  background: var(--nuit-fonce);
  border-top: 1px solid rgba(199, 162, 99, 0.3);
  border-bottom: 1px solid rgba(199, 162, 99, 0.3);
}
.regle > .conteneur { padding: clamp(36px, 4.5vw, 56px) 20px; }
.regle__titre {
  font-family: var(--serif); font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15; color: #fff; max-width: 22ch;
}
.regle__grille {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex; flex-wrap: wrap; gap: 28px 32px;
}
.regle__bloc { flex: 1 1 210px; min-width: 210px; }
.regle__etiquette {
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or); margin-bottom: 10px;
}
.regle__valeur { font-size: 19px; color: #fff; line-height: 1.3; }
.regle__detail { margin-top: 8px; font-size: 14px; color: var(--texte-faible); }
.regle__note {
  margin-top: clamp(28px, 3.5vw, 40px); padding-top: 22px;
  border-top: 1px solid var(--bordure);
  font-size: 16px; color: var(--texte-doux); max-width: 820px;
}
.tel-geant {
  font-family: var(--serif); font-size: clamp(30px, 4.4vw, 48px);
  color: var(--or); text-decoration: none; letter-spacing: -0.02em;
}
.tel-geant:hover { color: var(--or-clair); }

/* --- 7. Sections courantes ---------------------------------- */
.section { max-width: var(--largeur); margin: 0 auto; padding: clamp(64px, 8vw, 110px) 20px; }
.section--filet { border-top: 1px solid var(--bordure); }
.section h2 { font-size: clamp(32px, 4.6vw, 58px); color: #fff; max-width: 860px; }
.section__intro { margin-top: 20px; max-width: 600px; color: var(--texte-doux); }

/* --- 8. Liste des interventions ----------------------------- */
.interventions {
  margin-top: 48px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
}
.panne { padding: 24px 0; border-top: 1px solid var(--bordure); }
.panne:last-child { border-bottom: 1px solid var(--bordure); }
.panne h3 { font-size: 22px; color: #fff; }
.panne p { margin-top: 8px; color: var(--texte-doux); font-size: 16px; }
.panne__prix { margin-top: 10px; font-size: 14px; color: var(--texte-faible); }
.mention-prix { margin-top: 28px; font-size: 14px; color: var(--texte-faible); max-width: 760px; }
.aparte {
  margin-top: 26px; font-size: 16px; color: var(--texte); max-width: 700px;
  border-left: 1px solid var(--or); padding-left: 20px;
}

/* --- 9. Bandeau photo pleine largeur ------------------------ */
.bandeau {
  position: relative; min-height: clamp(340px, 44vw, 520px);
  display: flex; align-items: flex-end;
  background-image:
    linear-gradient(90deg, rgba(0,32,56,0.92) 0%, rgba(0,53,92,0.55) 55%, rgba(0,53,92,0.25) 100%),
    url('../photos/reseau-cuivre.jpg');
  background-size: cover; background-position: center 35%;
}
.bandeau > .conteneur { width: 100%; padding: clamp(40px, 6vw, 72px) 20px; }
.bandeau__phrase {
  font-family: var(--serif); font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.15; color: #fff; max-width: 640px;
}
.bandeau__legende {
  margin-top: 16px; font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--or);
}

/* --- 10. Section claire, gestionnaires ---------------------- */
.clair { background: var(--bleu-voile); color: var(--encre); padding: clamp(64px, 8vw, 110px) 20px; }
.clair > .conteneur {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.clair h2 { font-size: clamp(32px, 4.2vw, 52px); color: var(--nuit); max-width: 520px; }
.clair p { color: var(--gris-texte); }
.clair__intro { margin-top: 22px; max-width: 520px; }
.arguments { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }
.arguments h3 { font-size: 21px; color: var(--nuit); }
.arguments p { margin-top: 8px; font-size: 16px; }
.arguments__socle { border-top: 1px solid #DDE3EA; padding-top: 24px; }
.arguments__socle p { font-size: 17px; color: var(--encre); }
.arguments__socle strong { font-weight: 600; }
.arguments__net { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--nuit); }

/* --- 11. Galerie des réalisations --------------------------- */
.galerie {
  margin-top: 48px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px; align-items: start;
}
.vignette { margin: 0; position: relative; border-radius: 14px; overflow: hidden; }
.vignette:nth-child(even) { margin-top: clamp(0px, 3vw, 44px); }
.vignette img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.vignette figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 14px;
  background: linear-gradient(180deg, rgba(0,32,56,0) 0%, rgba(0,32,56,0.88) 70%);
  color: #fff; font-size: 14px;
}
.vignette figcaption span {
  display: block; color: var(--or); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- 12. Bloc artisan --------------------------------------- */
.artisan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.artisan__chiffre { display: flex; align-items: baseline; gap: 18px; }
.artisan__chiffre b {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(96px, 14vw, 190px); line-height: 0.8; color: var(--or);
}
.artisan__chiffre span {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texte-faible); max-width: 120px;
}
.artisan__texte { max-width: 600px; }
.artisan__texte h2 { font-size: clamp(28px, 3.4vw, 40px); }
.artisan__texte p { margin-top: 16px; color: var(--texte-doux); }
.artisan__legal { color: var(--texte-faible); font-size: 15px; }

/* --- 13. Contact et formulaire ------------------------------ */
.contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.contact h2 { font-size: clamp(28px, 3.4vw, 42px); }
.contact__tel {
  display: inline-block; margin-top: 24px; font-family: var(--serif);
  font-size: clamp(36px, 5.6vw, 62px); color: var(--or);
  text-decoration: none; letter-spacing: -0.02em;
}
.contact__tel:hover { color: var(--or-clair); }
.contact p { margin-top: 16px; color: var(--texte-doux); }
.contact__adresse { color: var(--texte-faible); font-size: 15px; }

.formulaire {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(143, 180, 214, 0.28); border-radius: 14px;
  padding: clamp(22px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
}
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .formulaire legend { font-size: 14px; color: var(--texte-doux); }
.champ input, .champ textarea {
  font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid rgba(143, 180, 214, 0.35); border-radius: 8px;
  background: rgba(0, 32, 56, 0.6); color: #fff; min-height: 48px;
}
.champ textarea { resize: vertical; }
.champ input[type="file"] { border: 0; background: none; color: var(--texte-doux); font-size: 15px; padding-left: 0; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.formulaire legend { padding: 0; margin-bottom: 2px; }
.radio {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; color: var(--texte); min-height: 32px;
}
.radio input { width: 18px; height: 18px; accent-color: var(--or); min-height: 0; }
.statut { font-size: 15px; color: var(--or); }
.statut:empty { display: none; }
.rgpd { font-size: 13px; color: var(--texte-faible); }

/* --- 14. Pied de page --------------------------------------- */
.pied {
  border-top: 1px solid var(--bordure); background: var(--nuit-fonce);
  padding: 64px 20px 40px;
}
.pied__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 44px 32px;
}
.pied__logo { display: inline-block; margin-bottom: 24px; }
.pied__logo img { width: auto; height: 124px; }
.pied p, .pied li { color: var(--texte-faible); font-size: 15px; }
.pied__titre {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--or); margin-bottom: 16px;
}
.pied ul { display: flex; flex-direction: column; gap: 10px; }
.pied a { color: var(--texte-faible); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied__tel { color: #fff !important; font-size: 19px; }
.pied__bas {
  max-width: var(--largeur); margin: 48px auto 0; padding-top: 22px;
  border-top: 1px solid var(--bordure); font-size: 13px; color: #6E93B5;
}

/* --- 15. Barre d'appel fixe sur mobile ---------------------- */
.dock { display: none; }
.dock__cale { display: none; }
@media (max-width: 767px) {
  .dock {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--nuit-fonce);
    border-top: 1px solid rgba(199, 162, 99, 0.4);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .dock__cale { display: block; height: 76px; }
  .dock a {
    text-decoration: none; min-height: 48px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
  }
  .dock__appel { flex: 1 1 auto; background: var(--or); color: var(--nuit-fonce); font-weight: 600; font-size: 17px; }
  .dock__wa { flex: 0 0 auto; min-width: 48px; padding: 0 14px; border: 1px solid rgba(199,162,99,0.5); color: #fff; font-size: 14px; }
  .nav__liens { display: none; }
  .nav__logo img { height: 56px; }
  /* Sur téléphone la photo prend toute la largeur, sinon elle laisse
     une marge inutile à gauche à cause de l'alignement à droite. */
  .hero__photo { max-width: 100%; justify-self: stretch; }
}

/* --- 16. Page de texte légal -------------------------------- */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(130px, 14vw, 190px) 20px clamp(64px, 8vw, 100px); }
.legal h1 { font-size: clamp(38px, 5.4vw, 62px); color: #fff; }
.legal h2 {
  font-size: 24px; color: #fff;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--bordure);
}
.legal p { margin-top: 16px; color: var(--texte-doux); }
.legal ul { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.legal li { color: var(--texte-doux); padding-left: 18px; position: relative; }
.legal li::before { content: "·"; position: absolute; left: 4px; color: var(--or); }
.legal dl { margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; }
.legal dl > div {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--bordure);
}
.legal dt { flex: 0 0 240px; color: var(--texte-faible); font-size: 15px; }
.legal dd { margin: 0; flex: 1 1 240px; color: #fff; }
.legal__retour { margin-top: 56px; }

/* --- 17. Animation de fond et accessibilité ----------------- */
@keyframes h2o-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1400; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__fond path { animation: none !important; }
  .hero__halo { display: none; }
  * { transition: none !important; }
}