/* ==========================================================================
   Matthieu Tormen — Plomberie & Chauffage — Bohars
   style.css — Design system & shared layout (reset, tokens, nav, footer, ui)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
/* ==========================================================================
   1. COULEURS
   Chaque couleur a un rôle précis. On ne pioche pas une couleur au hasard :
   on choisit le bon "rôle" pour l'usage voulu (fond de section, texte, etc).
   ========================================================================== */
 
:root {
 
  /* --- Bleus (identité de marque, issus du dégradé du logo) --- */
  --blue-deep: #0A2F5C;
  /* Bleu le plus sombre. Utilisé pour : fonds de section foncés (footer,
     bloc "chiffres"), texte de titre important sur fond clair. */
 
  --blue-primary: #0F5AA6;
  /* Bleu principal de la marque. Utilisé pour : liens, icônes, éléments
     interactifs, texte d'accent sur fond clair. */
 
  --blue-bright: #2F8FDE;
  /* Bleu le plus clair/lumineux. Utilisé pour : dégradés, lueurs (glow),
     jamais utilisé seul sur du texte (pas assez contrasté). */
 
  /* --- Fonds neutres --- */
  --blue-mist: #EEF4FC;
  /* Bleu très clair, presque blanc. Utilisé comme fond de section
     alternée (pour rythmer la page sans mettre du blanc partout). */
 
  --blue-mist-2: #E2ECFA;
  /* Variante un cran plus soutenue de --blue-mist, pour superposer
     des éléments (ex: une carte sur un fond déjà en --blue-mist). */
 
  --white: #FFFFFF;
 
  /* --- Texte --- */
  --ink: #0B1B2B;
  /* Couleur du texte "normal" (corps de texte). Ce n'est pas du noir pur :
     un noir légèrement teinté de bleu, plus doux à l'œil. */
 
  --ink-soft: #435367;
  /* Texte secondaire : sous-titres, descriptions, légendes. Toujours
     moins contrasté que --ink, jamais utilisé pour un titre principal. */
 
  /* --- Accent (le point orange du logo) --- */
  --accent: #F2793A;
  /* Couleur d'accent. Réservée aux éléments qui doivent attirer l'œil :
     boutons principaux, puces actives, éléments décoratifs ponctuels.
     Ne JAMAIS l'utiliser comme couleur de fond de grande surface. */
 
  --accent-dark: #D65F22;
  /* Variante plus foncée de l'accent, pour les états hover/actifs. */
 
  /* --- Dégradés (toujours construits à partir des couleurs ci-dessus) --- */
  --grad-brand: linear-gradient(
    135deg,
    var(--blue-bright) 0%,
    var(--blue-primary) 52%,
    var(--blue-deep) 100%
  );
  /* Le dégradé "signature" de la marque. Utilisé sur : le hero, les
     sections foncées mises en avant, les boutons ghost sur fond clair. */
 
  --grad-accent: linear-gradient(
    120deg,
    #FFA35C 0%,
    var(--accent) 100%
  );
  /* Dégradé orange, réservé aux boutons principaux (call-to-action). */
 
  --grad-glow: radial-gradient(
    circle at 30% 20%,
    rgba(47, 143, 222, 0.35),
    rgba(47, 143, 222, 0) 60%
  );
  /* Lueur douce utilisée en superposition sur les fonds foncés
     (effet "ambient light" derrière le hero par exemple). */
}
 
 
/* ==========================================================================
   2. TYPOGRAPHIE
   Deux polices, deux rôles bien distincts :
   - Sora  → tous les TITRES (h1 à h6), jamais le texte courant.
   - Manrope → tout le TEXTE COURANT (paragraphes, boutons, labels).
   ========================================================================== */
 
:root {
  --font-display: 'Sora', system-ui, sans-serif;
  /* Réservée aux titres. Plus géométrique, plus affirmée. */
 
  --font-body: 'Manrope', system-ui, sans-serif;
  /* Réservée au texte courant. Plus lisible sur de longs paragraphes. */
}
 
 
/* ==========================================================================
   3. ESPACEMENTS, RAYONS, OMBRES
   Une échelle unique pour tous les espacements : on ne choisit jamais une
   valeur "à la main" (ex: margin: 37px), toujours une de ces variables.
   ========================================================================== */
 
:root {
 
  /* --- Échelle d'espacement (petits vers grands) --- */
  --space-1: 0.5rem;   /* 8px  — petit espace interne (ex: gap d'icône)   */
  --space-2: 1rem;     /* 16px — espace standard entre éléments proches   */
  --space-3: 1.5rem;   /* 24px — espace entre blocs                       */
  --space-4: 2.5rem;   /* 40px — espace entre grandes zones               */
  --space-5: 4rem;     /* 64px — espace entre sections                    */
  --space-6: 6rem;     /* 96px — padding vertical d'une section complète  */
  --space-7: 9rem;     /* 144px — grands espacements exceptionnels         */
 
  /* --- Rayons d'arrondi --- */
  --radius-s: 10px;   /* petits éléments : champs de formulaire, badges  */
  --radius-m: 20px;   /* cartes, images                                  */
  --radius-l: 32px;   /* grands blocs, sections arrondies                */
 
  /* --- Ombres portées (toujours teintées de bleu, jamais du noir pur) --- */
  --shadow-soft: 0 8px 30px rgba(10, 47, 92, 0.08);
  /* Ombre légère : au repos, sur les cartes. */
 
  --shadow-mid: 0 20px 50px rgba(10, 47, 92, 0.14);
  /* Ombre moyenne : au survol (hover) d'une carte. */
 
  --shadow-deep: 0 30px 80px rgba(10, 47, 92, 0.22);
  /* Ombre marquée : éléments mis en avant (carte "featured", modale...). */
 
  /* --- Dimensions structurelles --- */
  --container: 1200px;
  /* Largeur max du contenu (voir .container plus bas). */
 
  --nav-h: 84px;
  /* Hauteur du header fixe. Sert aussi de référence pour le padding-top
     à appliquer sous le header sur les pages qui en ont besoin. */
 
  /* --- Courbes d'animation --- */
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  /* Courbe "signature" du site : léger effet de rebond en fin d'animation. */
 
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  /* Courbe plus neutre, pour les transitions rapides (hover, etc). */
}
 
 
/* ==========================================================================
   4. RESET
   On repart d'une base neutre avant d'ajouter nos propres styles.
   ========================================================================== */
 
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
* {
  margin: 0;
  padding: 0;
}
 
html {
  scroll-behavior: smooth;
}
 
html,
body {
  height: 100%;
}
 
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
 
img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
 
a {
  color: inherit;
  text-decoration: none;
}
 
ul,
ol {
  list-style: none;
}
 
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
 
button {
  cursor: pointer;
  background: none;
  border: none;
}
 
::selection {
  background: var(--accent);
  color: #fff;
}
 
/* Respecte les préférences d'accessibilité : coupe les animations si
   l'utilisateur a demandé de réduire les mouvements dans son OS. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
 
/* Contour visible au clavier (accessibilité), sur tous les éléments
   interactifs — jamais retiré sans le remplacer par autre chose. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
 
 
/* ==========================================================================
   5. HIÉRARCHIE DES TITRES (h1 → h6)
   Tous les titres partagent la même police et le même traitement de base.
   Sur les widgets Heading d'Elementor, choisis le tag HTML correspondant
   au niveau d'importance réel (h1 pour LE titre de page, h2 pour les
   titres de section, h3 pour les sous-titres de cartes...).
   Les tailles précises par contexte (ex: le très grand titre du hero)
   sont surchargées dans le CSS de chaque page — ceci n'est qu'une base
   par défaut, pour qu'un titre "brut" reste toujours cohérent.
   ========================================================================== */
 
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--blue-deep) !important;
}
 
h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
}
 
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem) !important;
}
 
h3 {
  font-size: 1.3rem !important;
}
 
h4 {
  font-size: 1.1rem;
}
 
h5,
h6 {
  font-size: 1rem;
}
 
/* Texte courant : toujours en Manrope, jamais en Sora. */
p {
  font-family: var(--font-body) !important;
  max-width: 62ch !important;
  color: var(--ink-soft) !important;
  /* Largeur max de lecture confortable : évite les lignes trop longues. */
}
 
 
/* ==========================================================================
   6. OUTILS DE MISE EN PAGE
   ========================================================================== */
 
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.hero-page {
  position: relative;
    background: var(--grad-brand);
    padding-top: calc(var(--nav-h) + var(--space-5));
    padding-bottom: var(--space-6);
    overflow: hidden;
    color: #fff;
}

.open-popup {
      background: var(--grad-accent);
    color: #fff;
    box-shadow: 0 12px 28px rgba(242, 121, 58, .35);
    border-radius: 30px;
    padding: 10px 20px !important;
    max-width: 250px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.open-popup:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
}

.open-popup:active {
    transform: translateY(-1px) scale(0.97);
}


.hero-apl-btn {
  background: rgba(255, 255, 255, .08);
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    border-radius: 30px;
    padding: 10px 20px !important;
    max-width: 250px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.hero-apl-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
}

.hero-apl-btn:active {
    transform: translateY(-1px) scale(0.97);
}
    


.page-hero-deco{ top: -40px !important; right: -60px !important; width: 420px !important; }





/* ==========================================================================
   HERO-PAGE — Layout + responsive
   ========================================================================== */

.hero-page .container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: var(--space-4, 2rem) !important;
}

.heropage-contain h2 {
  font-size: clamp(2rem, 3.6vw, 2.8rem) !important;
  color: var(--white) !important;
  margin-bottom: 1rem !important;
}

.heropage-contain p {
  font-size: 1.05rem !important;
  color: var(--white) !important;
  margin-bottom: 1.5rem !important;
}

.btn-hero-part {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Colonne droite : SVG remonté par rapport à la grille */
.hero-widgt {
  position: relative !important;
  align-self: start !important;
  margin-top: -60px !important;
}

.hero-widgt svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette large : on réduit juste le décalage vers le haut */
@media (max-width: 1024px) {
  .hero-page .container {
    gap: var(--space-3, 1.5rem) !important;
  }

  .hero-widgt {
    margin-top: -30px !important;
  }
}

/* Tablette et mobile : le SVG disparaît, le texte prend toute la largeur */
@media (max-width: 860px) {
  .hero-page .container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .hero-widgt {
    display: none !important;
  }

  .btn-hero-part {
    justify-content: center !important;
  }

  .heropage-contain p {
    align-items: center !important;
  }
}

/* Mobile : on resserre tailles de texte et boutons */
@media (max-width: 560px) {
  .heropage-contain h2 {
    font-size: 1.7rem !important;
  }

  .heropage-contain p {
    font-size: .95rem !important;
  }

  .btn-hero-part {
    flex-direction: column !important;
    align-items: center !important;
  }

  .btn-hero-part .btn {
    width: 100% !important;
    text-align: center !important;
  }
}



/* ==========================================================================
   HERO-BAS DE PAGE — SPLIT CTA
   ========================================================================== */

/* ==========================================================================
   SPLIT-CTA — Layout + responsive
   ========================================================================== */

.split {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.split-cta {
  background: var(--grad-brand) !important;
  border-radius: var(--radius-l) !important;
  color: #fff !important;
  padding: var(--space-4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  flex-wrap: wrap !important;
}

.split-content {
  flex: 1 1 65% !important;
}

.split-content h3 {
  color: var(--white) !important;
  font-size: 1.4rem !important;
  margin-bottom: .5rem !important;
}

.split-content p {
  color: var(--white) !important;
  font-size: .98rem !important;
  opacity: .9 !important;
  margin: 0 !important;
}

.btn-split {
  background: rgba(255, 255, 255, .08) !important;
  color: var(--white) !important;
  border: 1.5px solid rgba(255, 255, 255, .35) !important;
  backdrop-filter: blur(6px) !important;
  padding: 12px 28px !important;
  border-radius: 35px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: transform .25s ease, background .25s ease !important;
  flex-shrink: 0 !important;
}

.btn-split:hover {
  transform: translateY(-3px) !important;
  background: rgba(255, 255, 255, .18) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette large : on resserre légèrement le padding */
@media (max-width: 1024px) {
  .split-cta {
    padding: var(--space-3) !important;
  }
}

/* Tablette : le bouton passe sous le texte, tout se centre */
@media (max-width: 768px) {
  .split-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .split-content {
    flex: 1 1 100% !important;
  }

  .btn-split {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Mobile : on resserre tailles de texte et paddings */
@media (max-width: 560px) {
  .split {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .split-cta {
    padding: var(--space-2, 1.2rem) !important;
    gap: 1rem !important;
  }

  .split-content h3 {
    font-size: 1.2rem !important;
  }

  .split-content p {
    font-size: .9rem !important;
  }

  .btn-split {
    padding: 11px 20px !important;
    font-size: .9rem !important;
  }
}


/* ==========================================================================
   PAGE_CONTENT
   ========================================================================== */

  .main-content {
    background-color: var(--blue-mist-2);
   }

   .page-card {
    background-color: var(--white) !important;
    border-radius: var(--radius-m) !important;
    border: 1px solid rgba(10, 47, 92, .06) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease) !important;
    padding: 20px !important;
   }



   .page-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-mid) !important;
    border-color: rgba(15, 90, 166, .16) !important;
   }

   .page-card .num {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--blue-primary);
    opacity: .55;
    margin-bottom: var(--space-2);
   }

   .page-card svg {
        width: 32px;
    height: 32px;
    color: var(--blue-primary);
    margin-bottom: var(--space-2);
   }

   .page-card p {
    color: var(--ink-soft) !important;
   }



   .grid-page {
    animation: fadeUp 3s ease forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(80px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 
/* ==========================================================================
   SECTION
   ========================================================================== */

section {
  position: relative;
}
 
.section-pad {
  padding-block: var(--space-6);
}
 
@media (max-width: 720px) {
  .section-pad {
    padding-block: var(--space-5);
  }
}
 
/* Petit label au-dessus d'un titre de section (ex: "NOS PRESTATIONS")  */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: var(--space-2);
}
 
.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--grad-accent);
  border-radius: 2px;
}
 
/* Bloc d'intro standard en haut d'une section : eyebrow + h2 + paragraphe */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}
 
.section-head h2 {
  margin-bottom: var(--space-2);
}
 
.section-head p {
  color: var(--ink-soft);
  font-size: 1.05rem;
}
 
/* Variante centrée (texte centré + eyebrow sans le petit trait avant) */
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
 
.section-head.center .eyebrow::before {
  display: none;
}
 
 
/* ==========================================================================
   7. ANIMATIONS D'APPARITION AU SCROLL
   Ces classes ne font rien seules : c'est reveal.js qui ajoute la classe
   .in-view via IntersectionObserver quand l'élément entre dans l'écran.
   ========================================================================== */
 
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  will-change: transform, opacity;
}
 
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
 
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
 
.reveal-scale.in-view {
  opacity: 1;
  transform: scale(1);
}
 
/* Décale l'apparition de chaque enfant successif (effet cascade) */
.stagger > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}
 
 
/* ==========================================================================
   8. BOUTONS
   3 variantes : primary (action principale), ghost (sur fond foncé),
   outline (action secondaire sur fond clair).
   ========================================================================== */
 
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    background 0.35s var(--ease);
  isolation: isolate;
  overflow: hidden;
}
 
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
 
/* --- Bouton principal : fond dégradé orange, pour LE call-to-action --- */
.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  border: none;
  box-shadow: 0 12px 28px rgba(242, 121, 58, 0.35);
}
 
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(242, 121, 58, 0.45);
}
 
.btn-primary:active {
  transform: translateY(-1px);
}
 
/* --- Bouton "ghost" : verre dépoli, réservé aux fonds foncés/bleus --- */
.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
}
 
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}
 
/* --- Bouton "outline" : contour seul, pour les actions secondaires --- */
.btn-outline {
  background: transparent;
  color: var(--blue-primary);
  border: 1.5px solid rgba(15, 90, 166, 0.3);
}
 
.btn-outline:hover {
  background: var(--blue-mist);
  transform: translateY(-3px);
  border-color: var(--blue-primary);
}
 
/* --- Modificateurs de taille/largeur --- */
.btn-block {
  width: 100%;
}
 
.btn-lg {
  padding: 1.15rem 2.1rem;
  font-size: 1.05rem;
}
 
 
/* ==========================================================================
   9. BADGE
   Petite étiquette arrondie (ex: "Label Handibat", "Le plus demandé").
   ========================================================================== */
 
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--blue-mist);
  color: var(--blue-primary);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}



/* ==========================================================================
   Tuile "réalisation" — réutilisée sur la page d'accueil ET sur la page
   Réalisations. Une tuile = une photo de couverture + un titre en légende.
   ========================================================================== */

.realisation-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.4s var(--ease);
}

.realisation-tile:hover {
  box-shadow: var(--shadow-mid);
}

.realisation-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.realisation-tile:hover img {
  transform: scale(1.06);
}

/* Voile dégradé en bas de la photo, pour que le titre reste lisible */
.realisation-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 47, 92, 0.8) 0%,
    rgba(10, 47, 92, 0) 55%
  );
}

.realisation-tile .tile-caption {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  right: var(--space-2);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 1;
}

/* Petit badge de catégorie, en haut de la tuile (utilisé sur la page
   Réalisations, où chaque tuile affiche sa catégorie) */
.realisation-tile .tile-category {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  z-index: 1;
}





.handibat-section {
   padding: 70px !important;
}

.handibat-card {
   background-color: var(--blue-mist-2) !important;
  border-radius: 25px !important;
}

.sdb-photos-section {
   background-color: var(--blue-mist-2) !important;
}