/*
 * Rajeunissement du thème public (2026) : couche chargée en dernier, au-dessus du thème de
 * 2021 (custom.css, responsive.css, main.css). Même identité : logo, rouge du logo, indigo
 * des titres et boutons, bleu du sanitaire. Ce fichier pose les jetons (couleurs,
 * espacements, typographie) et rafraîchit en-tête, navigation, boutons, champs, cartes,
 * onglets, pied de page et pages du compte.
 *
 * Les !important ne servent qu'à reprendre la main sur les !important de main.css ou sur
 * les styles en ligne posés par les formulaires Symfony ; chacun est commenté.
 */

/* Unités en px : Bootstrap 3 fixe html { font-size: 10px }, un rem ne vaut pas 16 px ici. */
:root {
  /* Couleurs de marque */
  --capone-rouge: #b82024;          /* rouge du logo, texte sur blanc : 6,4:1 */
  --capone-rouge-vif: #e74c47;      /* chauffage, fonds et icônes */
  --capone-indigo: #5a59ee;         /* titres, boutons : 5,1:1 sur blanc */
  --capone-indigo-fonce: #4341d4;
  --capone-indigo-pale: #eeeefd;
  --capone-bleu: #41aef6;           /* sanitaire, fonds et icônes */
  --capone-bleu-texte: #1774b5;     /* sanitaire en texte : 4,9:1 sur blanc */
  --capone-marine: #23244a;         /* goutte du logo */

  /* Neutres */
  --texte: #262a36;
  --texte-doux: #585d6c;            /* 6,4:1 sur blanc */
  --fond: #ffffff;
  --fond-doux: #f5f6fa;
  --bordure: #d9dbe6;
  --bordure-forte: #b9bccb;
  --erreur: #b3261e;
  --erreur-fond: #fdecea;
  --succes-fond: #e9f7ef;

  /* Typographie */
  --police-titres: 'Poppins', system-ui, sans-serif;
  --police-texte: 'Roboto', system-ui, sans-serif;
  --taille-petite: 14px;
  --taille-texte: 16px;
  --taille-h3: clamp(18px, 16.8px + 0.35vw, 20.8px);
  --taille-h2: clamp(28px, 21.6px + 1.6vw, 40px);
  --taille-h1: clamp(28px, 22px + 1.4vw, 40px);

  /* Espacements, rayons, ombres */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 72px;
  --rayon: 12px;
  --rayon-petit: 8px;
  --rayon-pilule: 999px;
  --ombre-douce: 0 1px 2px rgba(20, 22, 50, .05), 0 6px 20px rgba(20, 22, 50, .07);
  --ombre-relief: 0 2px 4px rgba(20, 22, 50, .06), 0 14px 32px rgba(20, 22, 50, .12);
  --anneau-focus: 0 0 0 3px rgba(90, 89, 238, .35);
  --transition: .2s ease;
}

/* ============================ Base ============================ */

html { scroll-padding-top: 90px; }

body {
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { line-height: 1.65; }

a { transition: color var(--transition); }

/* Focus clavier visible partout (le thème le retirait sur plusieurs éléments). */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--capone-indigo);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

.lien-evitement {
  position: absolute;
  top: -100px;
  left: var(--espace-4);
  z-index: 100000;
  padding: var(--espace-3) var(--espace-5);
  border-radius: var(--rayon-petit);
  background: var(--capone-marine);
  color: #fff !important; /* a, a:hover du thème en noir */
  font-family: var(--police-titres);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus { top: var(--espace-4); }

::selection { background: var(--capone-indigo); color: #fff; }

/* Titres de section : échelle fluide, interlignage resserré. */
.sec-title > h2 {
  color: var(--texte);
  font-size: var(--taille-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sec-title p {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--texte-doux);
  font-size: 18px !important; /* main.css : 19px !important */
  line-height: 1.6;
  text-wrap: pretty;
}
.sec-title p a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ============================ En-tête ============================ */

.top_header { border-bottom: 1px solid #eceef4; }
.cnt-info a,
.emg-sec h4 a { text-decoration: none; }
.cnt-info a:hover { color: var(--capone-indigo); }
.emg-sec h4 a:hover { color: var(--capone-indigo); }

.navigations {
  background-color: var(--fond-doux);
  border-bottom: 1px solid #eceef4;
}
.navigations nav ul li a {
  position: relative;
  padding-block: var(--espace-2);
  letter-spacing: .02em;
}
/* Soulignement discret au survol et sur la rubrique courante. */
.navigations nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.navigations nav ul li a:hover::after,
.navigations nav ul li a[aria-current="page"]::after { transform: scaleX(1); }
.navigations nav ul li a.custom-home-ico::after { display: none; }
.navigations nav ul li a:hover { color: var(--capone-indigo); }

/* Couleurs des métiers dans la navigation : lisibles sur fond clair (main.css les force). */
.chauf-color { color: var(--capone-rouge) !important; }
.clim-color { color: var(--capone-indigo) !important; }
.shower-color { color: var(--capone-bleu-texte) !important; }


/* En-tête réduit (collant) et bouton menu : cible de 44 px (l'affichage reste réglé par le thème). */
.menu_btn {
  min-width: 44px;
  min-height: 44px;
  text-align: center;
  line-height: 44px;
}
.responsive-header { box-shadow: 0 4px 18px rgba(20, 22, 50, .08); }

/* Panneau de navigation mobile : fond marine du logo, contraste AA. */
.responsive-menu,
.responsive-menu ul li {
  background-color: var(--capone-marine);
}
.responsive-menu { box-shadow: 8px 0 30px rgba(20, 22, 50, .25); }
.responsive-menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 0;
}
.responsive-menu ul li a {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: 52px;
  padding: var(--espace-3) var(--espace-5);
  color: #fff !important; /* main.css colore les métiers en !important */
  letter-spacing: .03em;
}
.responsive-menu ul li a:hover,
.responsive-menu ul li a[aria-current="page"] {
  background: rgba(255, 255, 255, .08);
}
.responsive-menu ul li a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--capone-rouge-vif); }
.responsive-menu a:focus-visible { outline-color: #fff; outline-offset: -3px; }
.close-mobile-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Retour en haut de page. */
.scrollTop {
  width: 48px;
  height: 48px;
  line-height: 48px;
  right: 24px;
  bottom: 24px;
  box-shadow: var(--ombre-relief);
}
.scrollTop:hover { background-color: var(--capone-indigo-fonce); }

/* ============================ Messages ============================ */

.containerAlert .alert {
  display: flex;
  align-items: center;
  gap: var(--espace-4);
  padding: var(--espace-4) var(--espace-5);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-relief);
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}
.containerAlert .alert a { color: #fff; text-decoration: underline; }
.alertBox__fermer {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: calc(var(--espace-3) * -1) calc(var(--espace-4) * -1) calc(var(--espace-3) * -1) auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.alertBox__fermer::before,
.alertBox__fermer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.alertBox__fermer::after { transform: translate(-50%, -50%) rotate(-45deg); }
.alertBox__fermer:hover { background: rgba(255, 255, 255, .15); }
.alertBox__fermer:focus-visible { outline-color: #fff; }

/* Erreurs globales d'un formulaire (délai anti-spam, limite d'envoi) : restent affichées. */
.question_sec .alert-danger,
.forget .alert-danger,
.inscription + .alert-danger,
.container > .alert-danger {
  border: 1px solid #f3c1bd;
  border-left: 4px solid var(--erreur);
  border-radius: var(--rayon-petit);
  background: var(--erreur-fond);
  color: var(--erreur);
  font-size: 15.2px;
}

/* ============================ Boutons ============================ */

.btn,
.submit_btn input[type="submit"],
.inscription button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: 44px;
  padding: var(--espace-2) var(--espace-5);
  border-radius: var(--rayon-pilule);
  font-family: var(--police-titres);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-lg { min-height: 52px; padding-inline: var(--espace-6); font-size: 16px; }
.btn-block { display: flex; width: 100%; }

.btn-primary,
.btn-success,
.btn-login,
.question_sec .btn,
.inscription button,
.submit_btn input[type="submit"] {
  border: 1px solid var(--capone-indigo) !important; /* bordure en ligne #2222B6 du formulaire de contact */
  background-color: var(--capone-indigo) !important; /* main.css et Bootstrap */
  color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-login:hover,
.question_sec .btn:hover,
.inscription button:hover,
.submit_btn input[type="submit"]:hover {
  border-color: var(--capone-indigo-fonce) !important;
  background-color: var(--capone-indigo-fonce) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(90, 89, 238, .3);
}
.btn:active { transform: translateY(1px); }
.btn:focus,
.btn:active:focus { outline: none; }
.btn:focus-visible { outline: 3px solid var(--capone-indigo); outline-offset: 3px; box-shadow: none; }
.btn[disabled],
.btn.disabled,
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-outline-secondary {
  border: 1px solid var(--bordure-forte);
  background: #fff;
  color: var(--texte);
}
.btn-outline-secondary:hover { border-color: var(--capone-indigo); color: var(--capone-indigo); background: #fff; }

/* Bouton « Valider » du contact : le type de formulaire le décale en ligne (top: 20px). */
#contact_save {
  top: 0 !important;
  margin-top: var(--espace-5) !important;
  min-width: 180px;
}

/* ============================ Champs ============================ */

.input_field input,
.input_field select,
.input_field textarea,
.question_sec .form-control,
.forget .form-control,
.inscription .form-control,
.custom-modal .form-control {
  border: 1px solid var(--bordure);
  background-color: #fff;
  color: var(--texte);
  font-size: 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input_field input:hover,
.input_field select:hover,
.input_field textarea:hover,
.question_sec .form-control:hover,
.forget .form-control:hover { border-color: var(--bordure-forte); }
.input_field input:focus,
.input_field select:focus,
.input_field textarea:focus,
.question_sec .form-control:focus,
.forget .form-control:focus,
.inscription .form-control:focus,
.custom-modal .form-control:focus {
  border-color: var(--capone-indigo);
  box-shadow: var(--anneau-focus);
  outline: none;
}
/* Le thème mettait chaque mot du message en majuscule à l'affichage. */
.input_field textarea { text-transform: none; line-height: 1.5; }
.input_field select { appearance: auto; }
input::placeholder,
textarea::placeholder { color: #6b7080; opacity: 1; }

/* Erreurs de champ (thème de formulaire Bootstrap 4 de Symfony). */
.is-invalid,
.input_field .is-invalid,
.form-control.is-invalid {
  border-color: var(--erreur) !important; /* devant la bordure de survol et de focus */
}
.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .25) !important; }
.invalid-feedback {
  display: block;
  margin: var(--espace-2) var(--espace-4) 0;
  color: var(--erreur);
  font-size: 14.4px;
  line-height: 1.4;
  text-align: left;
}
.invalid-feedback .form-error-icon {
  display: inline-block;
  margin-right: var(--espace-2);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--erreur);
  color: #fff;
  font-size: 11.2px;
  letter-spacing: .04em;
  vertical-align: 1px;
}
.form-text.text-muted { color: var(--texte-doux) !important; font-size: 14px; }
.label-contact,
.forget label,
.custom-modal label { color: var(--texte); font-weight: 500; }

/* Captcha : visuel, renouvellement (44 px) et saisie alignés. */
.captcha-bloc { gap: var(--espace-3); }
.captcha-renouveler {
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
}
.captcha-renouveler:hover { color: var(--capone-indigo); border-color: var(--capone-indigo); }

/* Carte du formulaire de contact. */
.question_sec form {
  border: 1px solid #eceef4;
  border-radius: 20px;
  box-shadow: var(--ombre-douce);
}

/* ============================ Onglets ============================ */

.tabs_list li {
  min-height: 44px;
  transition: background-color var(--transition), box-shadow var(--transition);
}
.tabs_list li:not(.active):hover { background-color: #eeeff6; }
.tabs_list li[role="tab"]:focus-visible { outline-offset: 4px; border-radius: 35px; }
.tabs_list li.showering.active { background-color: var(--capone-bleu-texte); }

/* Catégories de la galerie et des vidéos : se replient au lieu de déborder sur mobile. */
.select-btn-galery { padding-inline: var(--espace-4); }
.select-btn-galery .tabs_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-3);
  box-shadow: none;
}
.select-btn-galery .tabs_list > a { text-decoration: none; border-radius: 35px; }
.select-btn-galery .tabs_list li { margin: 0; box-shadow: var(--ombre-douce); }
.select-btn-galery .tabs_list li.showering { background-color: var(--capone-bleu-texte); }

/* ============================ Cartes ============================ */

.servies_details {
  height: 100%;
  padding-bottom: var(--espace-4);
  border-radius: var(--rayon);
  transition: transform .25s ease, box-shadow .25s ease;
}
.servies_img { overflow: hidden; border-radius: var(--rayon); }
.servies_img > img { transition: transform .4s ease; }
.servies_details:hover { transform: translateY(-3px); }
.servies_details:hover .servies_img > img { transform: scale(1.03); }
.servies_details > h2 { min-height: 0; margin-bottom: var(--espace-3); }
.servies_details > h2 a { text-decoration: none; }
.servies_details > h2 a:hover { color: var(--capone-indigo); }
/* Toute la carte est cliquable via le lien du titre. */
.servies_details { position: relative; }
.servies_details > h2 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--rayon); }
.servies_details:focus-within { box-shadow: 0 0 0 3px var(--capone-indigo); }
.servies_details > h2 a:focus-visible { outline: none; }
.servies_details > p { color: var(--texte-doux); font-size: 16px; line-height: 1.5; }

.service_details .svss_info h3 { letter-spacing: .01em; }

/* Galerie et vidéos : survol lisible, icône d'ouverture à 44 px. */
.srvs_details .play_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.srvs_dv:focus-within:before { opacity: 1; visibility: visible; }
.srvs_dv:focus-within .srvs_details { opacity: 1; visibility: visible; margin: 0; }

/* Fiche prestation : liste latérale et contenu éditorial. */
.wegts-links li a { text-decoration: none; }
.wegts-links li a:hover { color: var(--capone-indigo); }
.content-service,
.content-service-clim { color: var(--texte); }
.pager-info a:hover { color: var(--capone-indigo); }

/* ============================ Pages du compte ============================ */

.entretien-title h1,
.register-title h1 {
  font-size: var(--taille-h1) !important; /* main.css : 48px !important */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.entretien-box,
.register-box {
  border-radius: 20px;
}
.register-content .question_sec form,
.forget {
  border-radius: 20px;
}
.register-content a[href$="mot-de-passe-oublie"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: var(--espace-3);
  color: var(--capone-indigo);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card-signin {
  border: 1px solid #eceef4;
  border-radius: 20px;
  box-shadow: var(--ombre-douce);
}

/* ============================ Pied de page ============================ */

footer {
  padding: var(--espace-7) 0 var(--espace-6);
  border-top: 1px solid #eceef4;
  background-color: var(--fond-doux);
}
.widget-contact ul li { margin-bottom: var(--espace-3); line-height: 1.5; }
.widget-contact ul li span.fl_right { font-size: 16px; }
.widget-contact ul li span.fl_right a {
  font-size: 15px !important; /* custom.css : 12px !important */
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fl_right a:hover { color: var(--capone-indigo-fonce) !important; text-decoration: underline; text-underline-offset: 3px; }
.widget-about > p { font-size: 15.2px; line-height: 1.6; }
.copyright {
  clear: both;
  width: 100%;
  margin-top: var(--espace-6);
  padding-top: var(--espace-5);
  border-top: 1px solid #e4e6ee;
  color: var(--texte-doux);
  font-size: 15.2px;
  font-weight: 400;
}
.copyright a { color: var(--capone-indigo); font-weight: 500; }
footer .our_map iframe { border-radius: var(--rayon); }

/* ============================ Mouvement réduit ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;   /* toutes les animations du thème */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .servies_details:hover,
  .servies_details:hover .servies_img > img { transform: none; }
}

/* Onglets actifs : libellé blanc lisible (AA). Rouge du logo pour le chauffage, bleu du
   sanitaire assombri ; les icônes gardent les teintes vives. */
.tabs_list li.heating.active,
.select-btn-galery .tabs_list li.heating { background-color: var(--capone-rouge); }

/* Texte courant aligné à gauche : le justifié du thème creusait des blancs sur mobile. */
p,
.content-service,
.content-service-clim,
.news-container,
.entretien-content p { text-align: start; }
.sec-title p,
.servies_details > p,
.svss_info p { text-align: center; }