/*
 * Charte SRE — version définitive (docs/CHARTE.md). Seule source des couleurs, tailles et espacements du site public.
 * Ordre : tokens, base, mise en page, composants, en-tête, pied de page, compatibilité avec les anciens gabarits.
 */

/* ---------- 1. Tokens ---------- */
:root {
  --sre-bleu: #156798;
  --sre-bleu-profond: #0B3550;
  --sre-bleu-clair: #E6F0F7;
  --sre-orange: #E28A31;
  --sre-orange-texte: #A85A16;
  --sre-texte: #0E151B;
  --sre-texte-2: #4A5866;
  --sre-fond: #F3F7FA;
  --sre-bordure: #D9E3EC;
  --sre-whatsapp: #25D366;
  --sre-erreur: #B42318;
  --sre-succes: #13663B;

  /* États fixés par la charte */
  --sre-orange-survol: #C8731F;
  /* Texte sur fond orange : texte sombre (6,9:1 sur #E28A31, 5,2:1 au survol), conforme WCAG AA. Le blanc (2,65:1) a été retiré le 06/11/2026 pour l'accessibilité ; docs/CHARTE.md § 1, Q20 */
  --sre-texte-sur-orange: #0E151B;
  --sre-whatsapp-survol: #1EBE5D;
  /* Texte et icône sur le vert WhatsApp : bleu profond (6,46:1 ; le blanc n'atteint que 1,98:1) */
  --sre-texte-sur-whatsapp: #0B3550;
  --sre-orange-clair: #FCEBDA;
  --sre-desactive-fond: #E6EBF0;
  --sre-desactive-texte: #6B7884;

  /* Rayons, ombre, espacements */
  --sre-rayon-s: 6px;
  --sre-rayon-m: 12px;
  --sre-rayon-rond: 999px;
  --sre-ombre: 0 8px 24px rgba(11, 53, 80, .10);
  --sre-e4: 4px;
  --sre-e8: 8px;
  --sre-e16: 16px;
  --sre-e24: 24px;
  --sre-e32: 32px;
  --sre-e48: 48px;
  --sre-e64: 64px;
  --sre-e96: 96px;

  /* Hauteurs de l'en-tête */
  --sre-hauteur-infos: 36px;
  --sre-hauteur-entete: 64px;

  /* Bootstrap aligné sur la charte */
  --bs-body-font-family: "Fira Sans", sans-serif;
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--sre-texte);
  --bs-link-color: var(--sre-bleu);
  --bs-link-color-rgb: 21, 103, 152;
  --bs-link-hover-color: var(--sre-bleu-profond);
  --bs-link-hover-color-rgb: 11, 53, 80;
  --bs-border-color: var(--sre-bordure);
}
@media (min-width: 1024px) {
  :root { --sre-hauteur-entete: 80px; }
}

/* ---------- 2. Base ---------- */
body {
  font-family: "Fira Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sre-texte);
  background: #fff;
}
h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label {
  font-family: "Fira Sans", sans-serif;
}
h1, .h1 { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--sre-texte); }
h2, .h2 { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--sre-texte); }
h3, .h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--sre-texte); }
h4, h5, h6, .h4, .h5, .h6 { font-size: 18px; font-weight: 600; line-height: 1.4; }
small, .small { font-size: 14px; }
a { color: var(--sre-bleu); }
a:hover { color: var(--sre-bleu-profond); }
@media (min-width: 768px) {
  body { font-size: 18px; }
  h1, .h1 { font-size: 48px; }
  h2, .h2 { font-size: 36px; }
  h3, .h3 { font-size: 24px; }
}

/* Focus visible au clavier */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  /* Bleu profond : 12,8:1 sur blanc (l'orange n'y atteint que 2,65:1) ; adapté sur les fonds sombres plus bas */
  outline: 3px solid var(--sre-bleu-profond);
  outline-offset: 2px;
  box-shadow: none;
}

/* Lien d'évitement */
.sre-evitement:focus {
  position: fixed;
  top: var(--sre-e8);
  left: var(--sre-e8);
  z-index: 2000;
  padding: var(--sre-e8) var(--sre-e16);
  background: #fff;
  color: var(--sre-bleu-profond);
  font-weight: 600;
}

/* ---------- 3. Mise en page ---------- */
/* Conteneur de 1200 px ; marges latérales 16 px (mobile), 32 px (tablette), gouttière de 24 px (ordinateur) */
.container {
  max-width: none;
  padding-inline: var(--sre-e16);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--sre-e32); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--sre-e24); }
}
@media (min-width: 1280px) {
  .container { max-width: calc(1200px + 2 * var(--sre-e24)); }
}

/* Sections */
.sre-section {
  padding-block: var(--sre-e64);
  background: #fff;
}
.sre-section--gris {
  background: var(--sre-fond);
  border-top: 1px solid var(--sre-bordure);
  border-bottom: 1px solid var(--sre-bordure);
}
.sre-section--profond {
  background: var(--sre-bleu-profond);
  color: #fff;
}
.sre-section--profond h1,
.sre-section--profond h2,
.sre-section--profond h3 {
  color: #fff;
}
.sre-section--orange {
  background: var(--sre-orange);
  color: var(--sre-texte-sur-orange);
}
.sre-section--orange h2,
.sre-section--orange h3,
.sre-section--orange p,
.sre-section--orange .ornagecolor {
  color: var(--sre-texte-sur-orange);
}
.sre-section--orange .septitle::before,
.sre-section--orange .septitle::after {
  display: none;
}
@media (min-width: 768px) {
  .sre-section { padding-block: var(--sre-e96); }
}
.sre-section > section { margin-block: 0 !important; }

/* Contenu saisi au back-office : sections en alternance, à la suite du héros (bleu profond) */
.sre-contenu-cms > section {
  margin-block: 0;
  padding-block: var(--sre-e64) !important;
  background: #fff;
}
.sre-contenu-cms > section:nth-of-type(even) {
  background: var(--sre-fond);
  border-top: 1px solid var(--sre-bordure);
  border-bottom: 1px solid var(--sre-bordure);
}
@media (min-width: 768px) {
  .sre-contenu-cms > section { padding-block: var(--sre-e96) !important; }
}

/* En-tête de section */
.sre-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sre-e16);
  margin-bottom: var(--sre-e32);
}
.sre-surtitre,
.sre-section-header__surtitre {
  margin: 0 0 var(--sre-e8);
  color: var(--sre-orange-texte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.sre-section--profond .sre-surtitre { color: var(--sre-orange); }
.sre-section--profond a:not([class*="btn-sre"]):focus-visible,
.sre-encart--profond a:not([class*="btn-sre"]):focus-visible { outline-color: var(--sre-orange); }
.sre-section-header__titre { margin: 0; }
.sre-section-header__intro {
  margin: var(--sre-e8) 0 0;
  max-width: 720px;
  color: var(--sre-texte-2);
}
.sre-section-header__lien {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sre-bleu);
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .sre-section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sre-e32);
  }
  .sre-section-header__lien { align-self: flex-end; }
}

/* ---------- 4. Composants ---------- */

/* Boutons : principal, secondaire, contour, WhatsApp */
.btn-sre-principal,
.btn-sre-secondaire,
.btn-sre-contour,
.btn-sre-whatsapp,
.btn.btnornage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sre-e8);
  min-height: 48px;
  padding: var(--sre-e8) var(--sre-e24);
  border: 2px solid transparent;
  border-radius: var(--sre-rayon-s);
  font-family: "Fira Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-sre-principal,
.btn.btnornage {
  background: var(--sre-orange);
  color: var(--sre-texte-sur-orange);
}
.btn-sre-principal:hover,
.btn.btnornage:hover {
  background: var(--sre-orange-survol) !important;
  color: var(--sre-texte-sur-orange) !important;
}
.btn-sre-secondaire {
  background: var(--sre-bleu);
  color: #fff;
}
.btn-sre-secondaire:hover {
  background: var(--sre-bleu-profond);
  color: #fff;
}
.btn-sre-contour {
  background: #fff;
  border-color: var(--sre-bleu);
  color: var(--sre-bleu);
}
.btn-sre-contour:hover {
  background: var(--sre-bleu-clair);
  color: var(--sre-bleu-profond);
}
.btn-sre-whatsapp {
  background: var(--sre-whatsapp);
  color: var(--sre-texte-sur-whatsapp);
}
.btn-sre-whatsapp:hover {
  background: var(--sre-whatsapp-survol);
  color: var(--sre-texte-sur-whatsapp);
}
.btn-sre-whatsapp--encart { min-height: 56px; }
.btn-sre-whatsapp .sre-icone-svg { flex: none; }
.btn-sre-principal:focus-visible,
.btn.btnornage:focus-visible {
  outline: 3px solid var(--sre-bleu-profond);
  outline-offset: 2px;
}
.btn-sre-secondaire:focus-visible,
.btn-sre-contour:focus-visible,
.btn-sre-whatsapp:focus-visible {
  outline: 3px solid var(--sre-orange);
  outline-offset: 2px;
}
/* Sur fond bleu profond ou orange, le contour de focus reste visible */
.sre-section--profond .btn-sre-principal:focus-visible,
.sre-nav .btn-sre-principal:focus-visible,
.sre-encart--profond .btn-sre-principal:focus-visible { outline-color: #fff; }
.sre-section--orange .btn-sre-secondaire:focus-visible,
.sre-section--orange .btn-sre-whatsapp:focus-visible,
.sre-encart--orange a:focus-visible { outline-color: var(--sre-bleu-profond); }
.btn-sre-principal:disabled, .btn-sre-principal.disabled,
.btn-sre-secondaire:disabled, .btn-sre-secondaire.disabled,
.btn-sre-contour:disabled, .btn-sre-contour.disabled,
.btn-sre-whatsapp:disabled, .btn-sre-whatsapp.disabled {
  background: var(--sre-desactive-fond);
  border-color: var(--sre-desactive-fond);
  color: var(--sre-desactive-texte);
  cursor: not-allowed;
  pointer-events: none;
}
.sre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sre-e16);
  align-items: center;
}
@media (max-width: 767.98px) {
  .sre-actions--pleine > a,
  .sre-actions--pleine > button { width: 100%; }
}

/* Téléphone en lien texte */
.sre-appel {
  margin: var(--sre-e8) 0 0;
  font-size: 14px;
}
.sre-appel a { font-weight: 600; }
.sre-section--profond .sre-appel,
.sre-encart--profond .sre-appel { color: var(--sre-bleu-clair); }
.sre-section--profond .sre-appel a,
.sre-encart--profond .sre-appel a { color: #fff; }
.sre-section--orange .sre-appel,
.sre-section--orange .sre-appel a,
.sre-encart--orange .sre-appel,
.sre-encart--orange .sre-appel a { color: var(--sre-texte-sur-orange); }

/* Badges et pastilles */
.sre-badges,
.sre-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sre-e8);
  margin: 0 0 var(--sre-e24);
  padding: 0;
  list-style: none;
}
.sre-badge,
.sre-badges > li,
.sre-pastilles > li {
  display: inline-flex;
  align-items: center;
  padding: var(--sre-e4) var(--sre-e16);
  border-radius: var(--sre-rayon-rond);
  background: var(--sre-bleu-clair);
  color: var(--sre-bleu-profond);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.sre-badge--orange { background: var(--sre-orange-clair); color: var(--sre-texte); }
.sre-pastilles--contour > li {
  min-height: 44px;
  padding: var(--sre-e8) var(--sre-e16);
  background: #fff;
  border: 1px solid var(--sre-bordure);
  color: var(--sre-texte);
}

/* Icône dans un carré bleu clair */
.sre-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--sre-rayon-m);
  background: var(--sre-bleu-clair);
  color: var(--sre-bleu);
  font-size: 24px;
  line-height: 1;
}

/* Fil d'Ariane */
.breadcrumb,
.sre-ariane {
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-item-padding-x: var(--sre-e8);
  --bs-breadcrumb-divider-color: currentColor;
  margin: 0 0 var(--sre-e16);
  font-size: 14px;
}
.breadcrumb a { color: var(--sre-bleu); text-decoration: underline; }
.breadcrumb-item.active { color: var(--sre-texte-2); }

/* Formulaires */
.form-label { margin-bottom: var(--sre-e8); font-size: 16px; font-weight: 600; color: var(--sre-texte); }
.form-control,
.form-select {
  min-height: 48px;
  padding: var(--sre-e8) var(--sre-e16);
  /* Texte 2 et non --sre-bordure : la limite du champ doit atteindre 3:1 (WCAG 1.4.11) */
  border: 1px solid var(--sre-texte-2);
  border-radius: var(--sre-rayon-s);
  background-color: #fff;
  color: var(--sre-texte);
  font-size: 16px;
}
textarea.form-control { min-height: 144px; }
.form-control::placeholder { color: var(--sre-texte-2); opacity: 1; }
.form-control:focus,
.form-select:focus {
  border-color: var(--sre-bleu);
  box-shadow: 0 0 0 3px var(--sre-bleu-clair);
}
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
  border: 2px solid var(--sre-erreur);
  background-image: none;
}
.invalid-feedback,
.sre-erreur {
  display: block;
  margin-top: var(--sre-e4);
  color: var(--sre-erreur);
  font-size: 14px;
}
.form-check-input { width: 20px; height: 20px; border: 1px solid var(--sre-texte-2); }
.form-check-input:checked { background-color: var(--sre-bleu); border-color: var(--sre-bleu); }
.form-check-label { font-size: 14px; }
.sre-message-succes {
  display: flex;
  gap: var(--sre-e8);
  align-items: flex-start;
  padding: var(--sre-e16);
  border: 1px solid var(--sre-succes);
  border-left-width: 4px;
  border-radius: var(--sre-rayon-s);
  background: #fff;
  color: var(--sre-succes);
  font-size: 16px;
}
.sre-message-erreur {
  padding: var(--sre-e16);
  border: 1px solid var(--sre-erreur);
  border-left-width: 4px;
  border-radius: var(--sre-rayon-s);
  background: #fff;
  color: var(--sre-erreur);
  font-size: 16px;
}

/* Cartes génériques */
.sre-carte {
  position: relative;
  height: 100%;
  padding: var(--sre-e24);
  border: 1px solid var(--sre-bordure);
  border-radius: var(--sre-rayon-m);
  background: #fff;
}

/* Encarts (colonne latérale, contact) */
.sre-encart {
  padding: var(--sre-e24);
  border-radius: var(--sre-rayon-m);
}
.sre-encart > :last-child { margin-bottom: 0; }
.sre-encart__titre { margin: 0 0 var(--sre-e8); font-size: 22px; font-weight: 700; }
.sre-encart--orange { background: var(--sre-orange); color: var(--sre-texte-sur-orange); }
.sre-encart--orange .sre-encart__titre,
.sre-encart--orange p { color: var(--sre-texte-sur-orange); }
.sre-encart--profond { background: var(--sre-bleu-profond); color: #fff; }
.sre-encart--profond .sre-encart__titre { color: #fff; }
.sre-encart--profond a:not([class*="btn-sre"]) { color: var(--sre-orange); font-weight: 600; }
.sre-encart .sre-actions { flex-direction: column; align-items: stretch; gap: var(--sre-e8); margin-top: var(--sre-e16); }
/* Bouton « Demander un diagnostic » dans l'encart orange : blanc plein (décision du client) */
.sre-encart--orange .btn-sre-contour {
  /* Bouton blanc plein, texte bleu profond (12,8:1), demande du client du 05/11/2026 */
  background: #fff;
  border-color: #fff;
  color: var(--sre-bleu-profond);
}
.sre-encart--orange .btn-sre-contour:hover { background: var(--sre-bleu-clair); border-color: var(--sre-bleu-clair); color: var(--sre-bleu-profond); }

/* Liste cochée */
.sre-coches {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sre-coches > li {
  position: relative;
  margin-bottom: var(--sre-e8);
  padding-left: var(--sre-e32);
  font-size: 16px;
}
.sre-coches > li::before {
  content: "\f633"; /* bi-check2 */
  position: absolute;
  left: 0;
  top: 0;
  font-family: "bootstrap-icons";
  color: var(--sre-bleu);
  font-weight: 700;
}

/* Étapes numérotées */
.sre-etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sre-etape {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--sre-e16);
  align-items: start;
  padding: var(--sre-e16);
  border: 1px solid var(--sre-bordure);
  border-radius: var(--sre-rayon-m);
  background: #fff;
}
.sre-etape__numero {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sre-rayon-rond);
  background: var(--sre-bleu-profond);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.sre-etape__titre { margin: 0; font-size: 18px; font-weight: 600; }
.sre-etape__texte { margin: var(--sre-e4) 0 0; color: var(--sre-texte-2); font-size: 16px; }
@media (min-width: 768px) {
  .sre-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sre-e24); }
}
@media (min-width: 1024px) {
  .sre-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sre-etape { display: block; padding: var(--sre-e24); }
  .sre-etape__numero {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: var(--sre-e16);
    background: none;
    color: var(--sre-orange-texte);
    font-size: 32px;
    line-height: 1;
  }
}

/* FAQ */
.sre-faq details {
  margin-bottom: var(--sre-e8);
  border: 1px solid var(--sre-bordure);
  border-radius: var(--sre-rayon-s);
  background: #fff;
}
.sre-faq summary {
  min-height: 48px;
  padding: var(--sre-e16);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.sre-faq details[open] summary { border-bottom: 1px solid var(--sre-bordure); }
.sre-faq details p { margin: 0; padding: var(--sre-e16); font-size: 16px; }

/* ---------- 5. Grille des domaines ---------- */
.activite-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sre-e16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.activite-cartes > li { min-width: 0; }
/* La carte d'appel occupe le reste de sa ligne : aucun trou, aucune activité seule */
.carte-appel-item--mobile-2 { grid-column: span 2; }
@media (min-width: 1024px) {
  .activite-cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sre-e24); }
  .carte-appel-item--mobile-2 { grid-column: auto; }
  .carte-appel-item--ordi-2 { grid-column: span 2; }
  .carte-appel-item--ordi-3 { grid-column: span 3; }
  .carte-appel-item--ordi-4 { grid-column: span 4; }
}
.activite-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--sre-bordure);
  border-radius: var(--sre-rayon-m);
  background: #fff;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.activite-carte:hover,
.activite-carte:focus-within { box-shadow: var(--sre-ombre); }
.activite-carte:focus-within { outline: 3px solid var(--sre-bleu-profond); outline-offset: 2px; }
.activite-carte-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.activite-carte-photo--icone {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sre-bleu-clair);
  color: var(--sre-bleu);
  font-size: 48px;
}
.activite-carte-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sre-e16);
}
.activite-carte-entete {
  display: flex;
  gap: var(--sre-e16);
  align-items: center;
  margin-bottom: var(--sre-e8);
}
.activite-carte-entete .sre-icone { display: none; }
.activite-carte-titre { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.activite-carte-titre a { color: var(--sre-texte); text-decoration: none; }
.activite-carte-titre a:hover { color: var(--sre-bleu); text-decoration: underline; }
.activite-carte-titre a:focus-visible { outline: none; }
.activite-carte-resume { margin: 0 0 var(--sre-e16); color: var(--sre-texte-2); font-size: 16px; }
.activite-carte .sre-badges { margin-bottom: var(--sre-e16); }
.activite-carte-lien { margin-top: auto; color: var(--sre-bleu); font-size: 16px; font-weight: 600; }
@media (min-width: 768px) {
  .activite-carte-corps { padding: var(--sre-e24); }
}
@media (min-width: 1024px) {
  .activite-carte-titre { font-size: 20px; }
  .activite-cartes--icones .activite-carte-entete .sre-icone { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .activite-carte { transition: none; }
}

/* Carte d'appel « Un autre besoin ? » */
.carte-appel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 160px;
  padding: var(--sre-e24);
  border-radius: var(--sre-rayon-m);
  background: var(--sre-bleu);
  color: #fff;
  transition: box-shadow .2s ease;
}
.carte-appel:hover,
.carte-appel:focus-within { box-shadow: var(--sre-ombre); }
.carte-appel:focus-within { outline: 3px solid var(--sre-bleu-profond); outline-offset: 2px; }
.carte-appel__titre { margin: 0 0 var(--sre-e8); color: #fff; font-size: 22px; font-weight: 700; }
.carte-appel p { margin: 0 0 var(--sre-e16); color: #fff; font-size: 16px; }
.carte-appel a { color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
.carte-appel a:focus-visible { outline: none; }

/* ---------- 6. Barre d'infos et en-tête ---------- */
.sre-infos {
  display: none;
  background: var(--sre-bleu);
  color: #fff;
  font-size: 14px;
}
.sre-infos__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sre-e16);
  min-height: var(--sre-hauteur-infos);
}
.sre-infos__contact { display: flex; gap: var(--sre-e24); }
.sre-infos a { color: #fff; text-decoration: none; }
.sre-infos a:hover { text-decoration: underline; }
.sre-infos a:focus-visible { outline-color: #fff; }
@media (min-width: 768px) {
  .sre-infos { display: block; }
}

.sre-entete {
  position: relative;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--sre-bordure);
}
.sre-entete__barre {
  display: flex;
  align-items: center;
  gap: var(--sre-e24);
  min-height: var(--sre-hauteur-entete);
}
.sre-entete__logo { display: inline-flex; flex: none; }
.sre-entete__logo img { width: 110px; height: auto; }
.sre-entete__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--sre-rayon-s);
  background: var(--sre-bleu);
  color: #fff;
}
.sre-entete__menu:hover { background: var(--sre-bleu-profond); }
.sre-entete__menu-fermer,
.sre-entete__menu[aria-expanded="true"] .sre-entete__menu-ouvrir { display: none; }
.sre-entete__menu[aria-expanded="true"] .sre-entete__menu-fermer { display: block; }
.sre-entete__action { display: none; }

/* Menu : liens */
.sre-nav__liste { margin: 0; padding: 0; list-style: none; }
.sre-nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sre-texte);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.sre-nav__lien:hover { color: var(--sre-bleu); }
.sre-nav__lien.is-actif { color: var(--sre-bleu); }
.sre-has-sub { position: relative; }
.sre-nav-split { display: flex; align-items: center; }
.sre-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
  padding: 0 var(--sre-e4);
  border: 0;
  border-radius: var(--sre-rayon-s);
  background: transparent;
  color: inherit;
  font-size: 14px;
}
.sre-sub-toggle .bi { transition: transform .2s ease; }
.sre-sub-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.sre-submenu { margin: 0; padding: var(--sre-e8) 0; }
.sre-submenu-link {
  display: block;
  padding: var(--sre-e8) var(--sre-e16);
  font-size: 16px;
  text-decoration: none;
}

/* Menu mobile et tablette (< 1024 px) : plein écran sur fond bleu profond */
@media (max-width: 1023.98px) {
  .sre-nav {
    display: none;
    position: fixed;
    top: var(--sre-menu-haut, var(--sre-hauteur-entete));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1029;
    padding: var(--sre-e16) var(--sre-e16) var(--sre-e32);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sre-bleu-profond);
  }
  .sre-menu-ouvert .sre-nav { display: block; }
  .sre-menu-ouvert body { overflow: hidden; }
  .sre-nav__item { border-bottom: 1px solid var(--sre-bleu); }
  .sre-nav-split { justify-content: space-between; }
  .sre-nav__lien { min-height: 56px; color: #fff; font-size: 18px; }
  .sre-nav__lien:hover,
  .sre-nav__lien.is-actif { color: var(--sre-orange); }
  .sre-nav a:focus-visible,
  .sre-nav button:focus-visible { outline-color: #fff; }
  .sre-sub-toggle { min-width: 44px; color: #fff; font-size: 16px; }
  .sre-submenu { padding: 0 0 var(--sre-e8) var(--sre-e16); }
  .sre-submenu-link { padding: var(--sre-e8) 0; color: var(--sre-bleu-clair); }
  .sre-submenu-link:hover,
  .sre-submenu-link.is-actif { color: var(--sre-orange); }
  .sre-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sre-e16);
    margin-top: var(--sre-e32);
  }
}

/* Ordinateur (≥ 1024 px) : menu en ligne, lien actif souligné d'orange (3 px), sous-menus déroulants */
/* Ordinateur : en-tête (logo, menu, action) collant en haut de l'écran ; la barre d'infos défile */
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--sre-hauteur-entete) + var(--sre-e16)); }
  .sre-entete { position: sticky; top: 0; }
}
@media (min-width: 1024px) {
  .sre-entete__logo img { width: 120px; }
  .sre-entete__menu { display: none; }
  .sre-nav { display: flex; flex: 1; justify-content: center; }
  .sre-nav__liste { display: flex; align-items: center; gap: var(--sre-e16); }
  .sre-nav__lien { min-height: var(--sre-hauteur-entete); }
  .sre-nav__lien.is-actif::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    height: 3px;
    background: var(--sre-orange);
  }
  .sre-nav__actions { display: none; }
  .sre-entete__action { display: block; flex: none; }
  .sre-submenu {
    position: absolute;
    top: calc(100% - 8px);
    left: calc(-1 * var(--sre-e16));
    z-index: 1000;
    min-width: 300px;
    border: 1px solid var(--sre-bordure);
    border-radius: var(--sre-rayon-m);
    background: #fff;
    box-shadow: var(--sre-ombre);
  }
  .sre-submenu-link { color: var(--sre-texte); }
  .sre-submenu-link:hover { background: var(--sre-fond); color: var(--sre-bleu); }
  .sre-submenu-link.is-actif { color: var(--sre-bleu); font-weight: 600; box-shadow: inset 3px 0 0 var(--sre-orange); }
  .sre-submenu-link:focus-visible { outline-offset: -3px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .sre-nav__liste { gap: var(--sre-e8); }
  .sre-nav__lien { font-size: 15px; }
}

/* Bouton flottant WhatsApp : mobile uniquement */
.sre-whatsapp-flottant {
  position: fixed;
  right: var(--sre-e16);
  bottom: var(--sre-e16);
  z-index: 1020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--sre-rayon-rond);
  background: var(--sre-whatsapp);
  color: var(--sre-texte-sur-whatsapp);
  box-shadow: var(--sre-ombre);
}
.sre-whatsapp-flottant:hover { background: var(--sre-whatsapp-survol); color: var(--sre-texte-sur-whatsapp); }
.sre-menu-ouvert .sre-whatsapp-flottant { display: none; }
@media (min-width: 768px) {
  .sre-whatsapp-flottant { display: none; }
}

/* Bouton « Retour en haut » : après défilement (menu.js), en bas à droite ; au-dessus du bouton WhatsApp sur mobile */
.sre-haut {
  position: fixed;
  right: var(--sre-e16);
  bottom: calc(var(--sre-e16) + 56px + var(--sre-e16));
  z-index: 1020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--sre-rayon-rond);
  background: var(--sre-bleu-profond);
  color: #fff;
  font-size: 20px;
  box-shadow: var(--sre-ombre);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--sre-e8));
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sre-haut.is-visible { opacity: 1; visibility: visible; transform: none; }
.sre-haut:hover { background: var(--sre-bleu); }
.sre-haut:focus-visible { outline: 3px solid var(--sre-orange); outline-offset: 2px; }
.sre-menu-ouvert .sre-haut { display: none; }
@media (min-width: 768px) {
  /* Au-dessus du badge reCAPTCHA (14 px du bas, 60 px de haut) */
  .sre-haut { right: var(--sre-e24); bottom: var(--sre-e96); width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sre-haut { transition: none; }
}

/* ---------- 7. Pied de page ---------- */
.sre-pied {
  padding: var(--sre-e64) 0 var(--sre-e24);
  background: var(--sre-bleu-profond);
  color: #fff;
  font-size: 16px;
}
.sre-pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e32);
}
.sre-pied__marque img { width: 160px; height: auto; margin-bottom: var(--sre-e16); }
.sre-pied__marque p { margin: 0; max-width: 320px; color: var(--sre-bleu-clair); }
.sre-pied__titre {
  margin: 0 0 var(--sre-e16);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.sre-pied ul { margin: 0; padding: 0; list-style: none; }
.sre-pied__colonne li { margin-bottom: var(--sre-e8); color: var(--sre-bleu-clair); }
.sre-pied a { color: var(--sre-bleu-clair); text-decoration: none; }
.sre-pied a:hover { color: #fff; text-decoration: underline; }
.sre-pied a:focus-visible { outline-color: var(--sre-orange); }
.sre-pied .sre-pied__tous { color: var(--sre-orange); font-weight: 600; }
.sre-pied__reseaux { display: flex; gap: var(--sre-e8); margin-top: var(--sre-e16) !important; }
.sre-pied__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; }
.sre-pied__bas {
  display: flex;
  flex-direction: column;
  gap: var(--sre-e8);
  margin-top: var(--sre-e48);
  padding-top: var(--sre-e24);
  border-top: 1px solid var(--sre-bleu);
  font-size: 14px;
}
.sre-pied__bas p { margin: 0; color: var(--sre-bleu-clair); }
.sre-pied__legal { display: flex; flex-wrap: wrap; gap: var(--sre-e8) var(--sre-e24); }
.sre-pied__legal a { text-decoration: underline; }
@media (min-width: 768px) {
  .sre-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sre-pied__bas { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  .sre-pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sre-e48); }
}
@media (max-width: 767.98px) {
  /* Le bouton flottant ne masque pas les derniers liens */
  .sre-pied { padding-bottom: calc(var(--sre-e24) + 72px); }
}

/* ---------- 8. Compatibilité : classes des anciens gabarits et du contenu saisi au back-office ---------- */
.ornagecolor,
.stat-number { color: var(--sre-orange-texte); }
.sre-section--profond .ornagecolor { color: var(--sre-orange); }
.stat-label { opacity: 1; color: var(--sre-texte-2); }
.cardorange { background-color: var(--sre-bleu) !important; background-image: none !important; color: #fff; }
.cardorange h2, .cardorange h3, .cardorange p { color: #fff; }
.bg-card-image { background: var(--sre-bleu-profond); color: #fff; border-radius: var(--sre-rayon-m); }
.bg-card-image h2, .bg-card-image h3, .bg-card-image p { color: #fff; }
.bg-card-image .ornagecolor { color: var(--sre-orange); }
.bgobjectif { background-color: var(--sre-bleu-profond); }
.boxjaune, .orngebg, .orangebg, .yellowbg { background: var(--sre-orange-clair); color: var(--sre-texte); }
.boxjaune h4 { color: var(--sre-texte); }
.bgmethod, .boxsolution, .bginfo, .infoorange { background: var(--sre-orange-clair); }
.bgcontent, .bgsolution, .bgservice { background: var(--sre-fond); }
.method-box { border-left-color: var(--sre-orange); }
.method-title { color: var(--sre-orange-texte); }
.title_1, .title_fblack, .titlewhite, .titlehero, .bgmethod h3, .bgcontent h3, .bgobjectif h3,
.bgsolution h4, .boxsolution h4, .banner-text h1 { text-transform: none; }
.btnplus { background: #fff; color: var(--sre-bleu-profond); border-radius: var(--sre-rayon-s); }
.btn.btnplus:hover { background: var(--sre-bleu) !important; color: #fff !important; }
.txtd { font-weight: 400 !important; }
.text_big { font-size: 18px; }
.stat-cards .stat-card { border-left-color: var(--sre-orange); }

/* ---------- 9. Bandeau d'appel (orange sur la plupart des pages, gris sur le hub) ---------- */
.sre-appel-bandeau__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e24);
  align-items: center;
}
.sre-appel-bandeau__titre { margin: 0 0 var(--sre-e8); }
.sre-appel-bandeau__texte p { margin: 0; }
.sre-appel-bandeau__texte br { display: none; }
.sre-appel-bandeau .sre-actions { justify-content: flex-start; }
.sre-appel-bandeau .sre-appel { flex-basis: 100%; }
@media (min-width: 1024px) {
  .sre-appel-bandeau__grille { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sre-e48); }
  .sre-appel-bandeau .sre-actions { justify-content: flex-end; }
  .sre-appel-bandeau .sre-appel { text-align: right; }
}

/* ---------- 10. Page Contact (pc-contact.png) ---------- */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e32);
  align-items: start;
}
.contact-formulaire { padding: var(--sre-e24); }
.contact-champs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e24);
}
.contact-envoi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sre-e16);
  align-items: center;
  margin-top: var(--sre-e32);
  color: var(--sre-texte-2);
  font-size: 14px;
}
.contact-laterale { display: flex; flex-direction: column; gap: var(--sre-e16); }
.contact-laterale .sre-carte { height: auto; font-size: 16px; }
.contact-laterale__titre { margin: 0 0 var(--sre-e8); font-size: 18px; font-weight: 700; }
@media (min-width: 768px) {
  .contact-formulaire { padding: var(--sre-e32); }
  .contact-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-champs__large { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sre-e48); }
}

/* Page Contact : étapes, choix du domaine, confirmation (charte : tokens uniquement) */
.contact-etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e16);
  margin: 0 0 var(--sre-e32);
  padding: 0;
  list-style: none;
}
.contact-etapes li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sre-e16);
  align-items: center;
  padding: var(--sre-e16);
  background: var(--sre-fond);
  border: 1px solid var(--sre-bordure);
  border-radius: var(--sre-rayon-m);
  font-size: 14px;
  color: var(--sre-texte-2);
}
.contact-etapes li strong { color: var(--sre-texte); font-size: 16px; }
.contact-etapes li span:not(.contact-etapes__num) { grid-column: 2; }
.contact-etapes__num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sre-rayon-rond);
  background: var(--sre-bleu);
  color: #fff;
  font-weight: 700;
}
.contact-domaines { margin: 0 0 var(--sre-e24); padding: 0; border: 0; min-width: 0; }
.contact-domaines legend { float: none; width: auto; padding: 0; margin-bottom: var(--sre-e8); }
.contact-domaines__liste { display: flex; flex-wrap: wrap; gap: var(--sre-e8); }
.contact-domaine { position: relative; }
.contact-domaine input { position: absolute; opacity: 0; pointer-events: none; }
.contact-domaine label {
  display: inline-block;
  padding: var(--sre-e8) var(--sre-e16);
  border: 1px solid var(--sre-bordure);
  border-radius: var(--sre-rayon-rond);
  background: #fff;
  color: var(--sre-texte);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.contact-domaine label:hover { border-color: var(--sre-bleu); }
.contact-domaine input:checked + label { background: var(--sre-bleu-clair); border-color: var(--sre-bleu); color: var(--sre-bleu-profond); }
.contact-domaine input:focus-visible + label { outline: 3px solid var(--sre-bleu-profond); outline-offset: 2px; }
.contact-aide { margin: var(--sre-e4) 0 0; font-size: 13px; color: var(--sre-texte-2); }
.contact-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-consentement { display: flex; gap: var(--sre-e8); align-items: flex-start; margin-top: var(--sre-e24); font-size: 14px; color: var(--sre-texte-2); }
.contact-consentement input { margin-top: 3px; flex: none; }
.contact-confirmation { text-align: center; padding: var(--sre-e32) var(--sre-e16); outline: none; }
.contact-confirmation__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--sre-rayon-rond);
  background: var(--sre-succes);
  color: #fff;
  font-size: 32px;
}
.contact-confirmation__titre { margin: var(--sre-e16) 0 var(--sre-e8); font-size: 24px; font-weight: 700; }
.contact-confirmation__suite { color: var(--sre-texte-2); }
.contact-confirmation .sre-actions { justify-content: center; }
@media (min-width: 768px) {
  .contact-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 11. Page « Notre expertise » ---------- */
.expertise-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sre-e16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.expertise-chiffres .sre-carte { display: flex; flex-direction: column; gap: var(--sre-e8); align-items: flex-start; }
.expertise-chiffres__valeur { color: var(--sre-orange-texte); font-size: 36px; font-weight: 700; line-height: 1.1; }
.expertise-chiffres__libelle { font-size: 16px; font-weight: 600; }
@media (min-width: 768px) {
  .expertise-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sre-e24); }
}
@media (min-width: 1024px) {
  .expertise-chiffres { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Atouts en cartes (page « Notre expertise ») */
.sre-atouts-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sre-e16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sre-atouts-cartes .sre-carte { display: flex; flex-direction: column; gap: var(--sre-e16); }
.sre-atouts-cartes__titre { margin: 0; font-size: 16px; font-weight: 600; }
@media (min-width: 1024px) {
  .sre-atouts-cartes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sre-e24); }
}

/* Mobile (maquette mobile-accueil.png) : cartes de domaine réduites à la photo et au titre */
@media (max-width: 767.98px) {
  .activite-carte-resume,
  .activite-carte-lien,
  .activite-carte .sre-badges { display: none; }
  .activite-carte-titre { font-size: 16px; }
  .carte-appel { padding: var(--sre-e16); }
  .carte-appel p { display: none; }
}

/* ---------- 12. Contenu saisi au back-office : couleurs et polices imposées par l'éditeur neutralisées ---------- */
main font[color] { color: inherit; }
main [style*="font-family"] { font-family: "Fira Sans", sans-serif !important; }
main [style*="color"]:not(svg):not(svg *) { color: inherit !important; }
.page-hero__intro font[color] { color: #fff; font-weight: 600; }

/* Anciennes classes de titre : échelle de la charte (H2 26/36 px, chiffres 32/48 px) */
@media (max-width: 767.98px) {
  .title_1, .title_fblack, .titlewhite, .titlehero, .bigtexte h2, .bgsolution h5, .banner-text h1 { font-size: 26px; }
  .numberchi { font-size: 32px; }
}

/* Page Secteurs (contenu du back-office) : 2 blocs par ligne à partir de 768 px (demande du client), 1 en dessous */
.sectors > .d-flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sre-e24) !important;
  margin-inline: 0 !important;
  padding: var(--sre-e24) 0 0 !important;
}
@media (min-width: 768px) {
  .sectors > .d-flex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sectors .card { width: auto; border: 1px solid var(--sre-bordure); border-radius: var(--sre-rayon-m); overflow: hidden; }
.sectors .card img { height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.sectors .card:hover { transform: none; }
.sre-texte-juridique { max-width: calc(800px + 2 * var(--sre-e24)); font-size: 16px; }

/* Menu mobile ouvert : l'en-tête (et son bouton de fermeture) reste visible même après défilement */
.sre-menu-ouvert .sre-entete { position: sticky; top: 0; }