/* ==========================================================================
   HF Concept — feuille de style du site vitrine
   Copie fidèle du site Elementor d'origine (relevé du 14/10/2026).
   Les mesures (tailles, marges, couleurs) sont celles relevées sur l'original.

   Points de rupture (identiques à l'original) :
     - bureau     : 1025 px et plus
     - tablette   : 768 à 1024 px
     - téléphone  : 767 px et moins

   Sommaire
     1.  Police
     2.  Variables
     3.  Base
     4.  Utilitaires et icônes
     5.  Boutons
     6.  En-tête fixe
     7.  Ouverture
     8.  Carte « Demande de devis gratuit » et formulaire
     9.  Bandeau de chiffres
     10. Sections communes
     11. Les étapes
     12. Notre expertise
     13. Nos réalisations
     14. Questions fréquentes
     15. Un projet de travaux ?
     16. Pied de page
     17. Boutons flottants
     18. Fenêtre « Être rappelé(e) »
     19. Tablette (768 à 1024 px)
     20. Téléphone (767 px et moins)
     21. Préférences d'animation
   ========================================================================== */


/* 1. Police ---------------------------------------------------------------
   Roboto auto-hébergée. Google la sert désormais en police « variable » :
   ce seul fichier (37 Ko, alphabet latin) couvre les graisses 400, 500,
   600 et 700 utilisées par le site. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../polices/roboto-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Variables ------------------------------------------------------------ */
:root {
  /* Couleurs de la charte */
  --vert: #003d36;            /* couleur principale : titres, icônes, fond du bloc contact */
  --vert-fonce: #00312b;      /* survol des boutons orange */
  --bleu: #284376;            /* textes des listes à icônes */
  --texte: #2f2f2f;           /* texte courant */
  --orange: #f95b17;          /* boutons d'action */
  --gris-clair: #f9f9f9;      /* fonds de section alternés */
  --blanc: #fff;
  --whatsapp: #25d366;
  --etoile: #f0ad4e;
  --etoile-vide: #ccd6df;
  --faq-texte: #1f2124;
  --faq-bordure: #d5d8dc;
  --champ-bordure: #69727d;
  --champ-bordure-active: #333;
  --erreur: #761109;

  /* Voiles et transparences */
  --voile-ouverture: rgb(0 0 0 / 29%);        /* assombrit la photo d'ouverture */
  --voile-carte: rgb(255 255 255 / 67%);      /* fond des cartes de devis */
  --voile-expertise: rgb(255 255 255 / 77%);  /* étiquette des cartes « Notre Expertise » */
  --voile-fenetre: rgb(0 0 0 / 74%);          /* fond derrière la fenêtre */

  /* Polices */
  --police: "Roboto", sans-serif;
  --police-systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Mise en page */
  --largeur: 1140px;          /* largeur maximale du contenu */
  --ecart: 20px;              /* espace entre deux blocs */
  --ecart-carte: 26px;        /* espace entre deux cartes */
  --section-haut: 78px;       /* marge haute et basse des sections */
  --section-cote: 26px;       /* marge latérale des sections */
  --marge-paragraphe: 0.9rem; /* 14,4 px sous un paragraphe */
  --hauteur-entete: 118px;

  /* Formes */
  --rayon: 13px;
  --rayon-bouton: 6px;
  --rayon-pilule: 52px;
  --rayon-champ: 3px;
  --ombre: 0 0 30px 0 rgb(0 0 0 / 20%);
  --ombre-legere: 0 0 10px 0 rgb(0 0 0 / 20%);
  --ombre-fenetre: 2px 8px 23px 3px rgb(0 0 0 / 20%);
}


/* 3. Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  /* les ancres ne passent pas sous l'en-tête fixe */
  scroll-padding-top: calc(var(--hauteur-entete) + 12px);
}

body {
  margin: 0;
  background-color: var(--blanc);
  color: var(--texte);
  font-family: var(--police-systeme);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main,
.entete,
.actions-flottantes,
.fenetre {
  font-family: var(--police);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--vert);
  font-family: var(--police);
  font-weight: 600;
  line-height: 1;
}

p {
  margin: 0 0 var(--marge-paragraphe);
}

a {
  color: inherit;
  text-decoration: none;
}

b {
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea {
  margin: 0;
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}


/* 4. Utilitaires et icônes ------------------------------------------------ */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icone {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.lien-evitement {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2000;
  padding: 12px 24px;
  background-color: #eee;
  color: #333;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement:focus {
  clip-path: none;
}

/* Listes avec icône (puces de l'ouverture, réalisations, contact) */
.liste-icones li,
.liste-icones a {
  display: flex;
  align-items: center;
}

.liste-icones .icone {
  width: 14px;
  height: 14px;
  margin-right: 3.5px;
}

.liste-icones span {
  padding-left: 5px;
}


/* 5. Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--rayon-bouton);
  font-family: var(--police);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.bouton--blanc {
  background-color: var(--blanc);
  color: var(--orange);
  box-shadow: var(--ombre);
}

.bouton--orange {
  background-color: var(--orange);
  color: var(--blanc);
}

.bouton--orange:hover,
.bouton--orange:focus-visible {
  background-color: var(--vert-fonce);
}

.bouton--orange:focus-visible,
.bouton--envoi:focus-visible {
  outline-color: var(--vert);
}


/* 6. En-tête fixe ----------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--blanc);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 20px, var(--largeur));
  height: var(--hauteur-entete);
  margin-inline: auto;
  padding: 20px 20px 20px 10px;
}

.entete__logo {
  display: block;
  align-self: flex-start;
}

.entete__logo img {
  display: block;
  width: 72px;
  height: 72px;
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--ecart);
}

.service-client {
  display: flex;
  align-items: center;
  gap: 15px;
}

.service-client__texte {
  position: relative;
}

/* Zone tactile du lien « Service Client » : tout le bloc (titre et numéro),
   agrandi sans rien changer à l'affichage (44 px de haut). */
.service-client__titre a::after {
  content: "";
  position: absolute;
  inset: -9px -7px;
}

.service-client__titre {
  margin: 8px 0 16px;
  color: var(--vert);
  font-size: 16px;
  line-height: 1px;
}

.service-client__numero {
  margin: 0;
  color: var(--texte);
  font-size: 16px;
  font-weight: 600;
  line-height: 1px;
}

.service-client__icone {
  position: relative;
  display: flex;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--vert);
  color: var(--blanc);
  font-size: 16px;
}

/* zone tactile de l'icône portée à 44 × 44 px, sans changer son dessin */
.service-client__icone::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}


/* 7. Ouverture ------------------------------------------------------------ */
.ouverture {
  position: relative;
  isolation: isolate;
  min-height: 806px;
  margin-top: 84px;
  padding: var(--section-haut) var(--section-cote) 13px;
  background-color: rgb(0 61 54 / 47%);
  color: var(--blanc);
}

.ouverture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--voile-ouverture);
}

.ouverture__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ouverture__fond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ouverture__interieur {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
  width: min(100%, var(--largeur));
  margin-inline: auto;
}

.ouverture__titre {
  color: var(--blanc);
  font-size: 40px;
  text-align: center;
}

.ouverture__accroche {
  text-align: center;
}

.ouverture__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: var(--ecart);
  margin-top: 26px;
  padding: 10px;
}

.ouverture__arguments {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
  align-self: start;
  width: 100%;
  padding: 10px;
}

.avis {
  display: flex;
  align-items: center;
  gap: var(--ecart);
  padding: 10px;
}

.avis__etoiles {
  display: flex;
}

.etoile {
  position: relative;
  display: block;
  color: var(--etoile);
}

.etoile .icone {
  display: block;
  width: 16px;
  height: 16px;
}

.etoile--partielle {
  color: var(--etoile-vide);
}

.etoile__remplie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  overflow: hidden;
  color: var(--etoile);
}

.avis__note {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.ouverture__sous-titre {
  color: var(--blanc);
  font-size: 32px;
}

.liste-icones--coches {
  color: var(--blanc);
}

/* Boutons de l'ouverture : tablette et téléphone seulement */
.ouverture__boutons {
  display: none;
}


/* 8. Carte « Demande de devis gratuit » et formulaire --------------------- */
.carte-devis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ecart-carte);
  padding: 26px 13px;
  border-radius: var(--rayon);
  background-color: var(--voile-carte);
  color: var(--texte);
}

.carte-devis--ouverture {
  width: 78%;
}

.carte-devis > * {
  max-width: 100%;
}

.carte-devis > .garanties {
  max-width: none; /* la liste déborde de 4 px de chaque côté, comme l'original */
}

.carte-devis__titre {
  font-size: 32px;
  text-align: center;
}

.carte-devis__delai {
  margin-top: -18px;
  text-align: center;
}

/* L'espace sous la phrase est porté par un padding puis repris par une marge
   négative, comme le paragraphe et son bloc dans l'original : les arrondis
   au 1/64 de pixel tombent alors au même endroit et le texte de la fenêtre
   se pose sur les mêmes lignes de pixels. Comme l'original, la marge est de
   -18 px sur les quatre côtés : la phrase dispose de 36 px de plus en largeur
   et passe à la ligne au même endroit. */
.carte-devis__mention {
  margin: -18px -18px;
  padding-bottom: var(--marge-paragraphe);
  text-align: center;
}

/* Formulaire : deux colonnes (Tél / Email), le reste sur toute la largeur */
.formulaire {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  margin-bottom: -10px;
  padding: 0 21px;
}

.formulaire__champ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 50%;
  margin-bottom: 10px;
  padding: 0 5px;
}

.formulaire__champ--large {
  width: 100%;
}

.formulaire label {
  display: inline-block;
  color: var(--vert);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.formulaire input,
.formulaire textarea {
  flex-basis: 100%;
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--champ-bordure);
  border-radius: var(--rayon-champ);
  background-color: var(--blanc);
  color: var(--texte);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.3s;
}

.formulaire input {
  padding: 8px 16px;
}

.formulaire textarea {
  display: block;
  padding: 5px 14px;
  overflow: auto;
  resize: vertical;
}

/* Texte d'exemple : couleur du champ à 60 %, comme l'original
   (le gris par défaut du navigateur était plus foncé). */
.formulaire input::placeholder,
.formulaire textarea::placeholder {
  color: inherit;
  opacity: 0.6;
}

.formulaire input:focus,
.formulaire textarea:focus {
  border-color: var(--champ-bordure-active);
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.bouton--envoi {
  width: 100%;
  min-height: 40px;
  padding: 0 24px;
  background-color: var(--orange);
  color: var(--blanc);
  white-space: normal;
}

.bouton--envoi:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Champ piège pour les robots : invisible pour les visiteurs */
.formulaire__piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Message affiché sous le bouton après l'envoi */
.formulaire__etat {
  width: 100%;
  margin-bottom: 10px;
  padding: 0 5px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

.formulaire__etat:empty {
  display: none;
}

.formulaire__etat--ok {
  color: var(--vert);
  font-weight: 600;
}

.formulaire__etat--erreur {
  color: var(--erreur);
  font-weight: 500;
}

.formulaire__etat p {
  margin: 0 0 6px;
}

.formulaire__etat a,
.retour-envoi a {
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

/* Les deux liens de la solution de repli (messagerie, appel) : côte à côte
   ou l'un sous l'autre selon la place, assez hauts pour le doigt. */
.formulaire__repli {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
}

.formulaire__repli a {
  padding-block: 8px;
}

/* Retour d'un envoi sans JavaScript (envoyer.php renvoie vers
   index.html?envoi=ok#contact-devis-envoye) : le message visé par l'ancre
   s'affiche, les autres restent cachés. */
.retour-envoi {
  display: none;
  width: 100%;
  margin: 0 0 10px;
  padding: 0 5px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

.retour-envoi:target,
.retour-envoi--visible {
  display: block;
}

.retour-envoi--ok {
  color: var(--vert);
  font-weight: 600;
}

.retour-envoi--erreur {
  color: var(--erreur);
  font-weight: 500;
}

/* Les trois engagements sous le formulaire */
.garanties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -18px -4px 0;
}

.garanties li {
  display: flex;
  align-items: center;
  margin: 0 4px;
  color: var(--bleu);
  font-size: 14px;
}

.garanties .icone {
  width: 14px;
  height: 14px;
  margin-right: 3.5px;
  color: var(--vert);
}

.garanties span {
  padding-left: 5px;
}


/* 9. Bandeau de chiffres -------------------------------------------------- */
.bandeau {
  display: flex;
  justify-content: center;
  padding: 18px;
  background-color: var(--gris-clair);
  font-family: var(--police);
}

.bandeau__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: -13px;
}

.bandeau__liste li {
  display: flex;
  align-items: center;
  margin-inline: 13px;
  color: var(--bleu);
}

.bandeau__liste .icone {
  width: 14px;
  height: 14px;
  margin-right: 3.5px;
  color: var(--vert);
}

.bandeau__liste span {
  padding-left: 5px;
}


/* 10. Sections communes --------------------------------------------------- */
.section {
  padding: var(--section-haut) var(--section-cote);
}

.section--grise {
  background-color: var(--gris-clair);
}

.section__interieur {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
  width: min(100%, var(--largeur));
  margin-inline: auto;
}

.section__titre {
  font-size: 32px;
  text-align: center;
}

.section__intro {
  text-align: center;
}


/* 11. Les étapes ---------------------------------------------------------- */
.etapes__liste {
  display: flex;
  gap: var(--ecart-carte);
  padding: 13px;
}

.etape {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  text-align: center;
}

.etape__icone {
  align-self: center;
  width: 26px;
  height: 26px;
  color: var(--vert);
}

.etape__titre {
  margin: 8px 0 5px;
  font-size: 18px;
  line-height: 1.2;
}

.etape p {
  margin: 0;
  font-size: 14px;
}


/* 12. Notre expertise ----------------------------------------------------- */
.expertise__liste {
  display: flex;
  gap: var(--ecart-carte);
  padding: 10px;
}

.expertise__carte {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 1 100%;
  padding: 104px 26px 0;
  overflow: hidden;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

/* La photo occupe tout le fond de la carte, calée en haut à gauche */
.expertise__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

.expertise__texte {
  flex: 1 1 auto;
  padding: 0 5px;
  border-radius: 26px;
  background-color: var(--voile-expertise);
  text-align: center;
}

.expertise__titre {
  margin: 8px 0 5px;
  font-size: 18px;
  line-height: 1.2;
}

/* Le titre est un lien d'appel : zone tactile agrandie (37 px de haut) sans
   changer l'affichage. */
.expertise__titre a {
  position: relative;
}

.expertise__titre a::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

.expertise__texte p {
  margin: 0;
  font-size: 14px;
}


/* 13. Nos réalisations ---------------------------------------------------- */
.realisations__grille {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--ecart-carte);
  padding: 26px;
}

.realisation {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
  width: 100%;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: var(--blanc);
  box-shadow: var(--ombre-legere);
}

.realisation__image,
.realisation__image img {
  display: block;
}

.realisation__image img {
  width: 100%;
  aspect-ratio: 1024 / 559; /* proportions exactes des photos d'origine */
  object-fit: cover;
}

/* La photo du tabac est recadrée à 188 px de haut, comme l'original */
.realisation__image--fixe img {
  height: 188px;
  object-fit: cover;
}

.realisation__infos {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
  margin-top: calc(-1 * var(--ecart));
  padding: 10px;
}

.realisation__titre {
  font-size: 16px;
}

.liste-icones--ligne {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -8px;
  color: var(--bleu);
  font-size: 14px;
}

.liste-icones--ligne li {
  margin-inline: 8px;
}

.liste-icones--ligne .icone {
  color: var(--vert);
}


/* 14. Questions fréquentes ------------------------------------------------ */
.faq__titre {
  text-align: start;
}

.faq__question summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--faq-bordure);
  color: var(--faq-texte);
  font-family: var(--police-systeme);
  font-size: 16px;
  line-height: 24px;
  list-style: none;
  cursor: pointer;
}

.faq__question summary::-webkit-details-marker {
  display: none;
}

.faq__icone {
  display: flex;
}

.faq__icone .icone {
  width: 13.125px;
  height: 15px;
}

.faq__moins,
.faq__question[open] .faq__plus {
  display: none;
}

.faq__question[open] .faq__moins {
  display: block;
}

.faq__reponse {
  padding: 10px;
  border: 1px solid var(--faq-bordure);
}


/* 15. Un projet de travaux ? ---------------------------------------------- */
.contact {
  padding: var(--section-haut) var(--section-cote);
  background-color: var(--vert);
  color: var(--blanc);
}

.contact__interieur {
  display: flex;
  gap: var(--ecart);
  width: min(100%, var(--largeur));
  margin-inline: auto;
}

.contact__coordonnees,
.contact__formulaire {
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  gap: var(--ecart);
  min-width: 0;
  padding: 10px;
}

.contact__formulaire {
  align-items: flex-end;
}

.contact__titre {
  color: var(--blanc);
  font-size: 32px;
}

.liste-icones--contact .icone {
  color: var(--blanc);
}

.liste-icones--contact a {
  width: 100%;
}

.contact__carte {
  line-height: 0;
}

/* Focus clavier dans la carte Google : contour autour de la carte (Firefox ;
   Chrome et Safari n'appliquent pas :focus-within à travers une iframe, la
   carte montre alors son propre contour sur l'élément actif). */
.contact__carte:focus-within {
  outline: 3px solid var(--blanc);
  outline-offset: 2px;
}

.contact__carte iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

.carte-devis--contact {
  width: 78%;
}

.carte-devis--contact label {
  padding-bottom: 5px;
}

.contact :focus-visible {
  outline-color: var(--blanc);
}

.contact .carte-devis :focus-visible {
  outline-color: var(--vert);
}


/* 16. Pied de page -------------------------------------------------------- */
.pied {
  padding: 16px 0;
}

.pied__interieur {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-inline: auto;
}

.pied__interieur p {
  margin: 0;
}

@media (min-width: 576px) {
  .pied__interieur { max-width: 500px; }
}

@media (min-width: 768px) {
  .pied__interieur { max-width: 600px; }
}

@media (min-width: 992px) {
  .pied__interieur { max-width: 800px; }
}

@media (min-width: 1200px) {
  .pied__interieur { max-width: var(--largeur); }
}

@media (max-width: 575px) {
  .pied__interieur { padding-inline: 10px; }
}

@media (max-width: 576px) {
  .pied__interieur {
    display: block;
    text-align: center;
  }
}


/* 17. Boutons flottants --------------------------------------------------- */
.actions-flottantes {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 900;
  padding: 10px;
  pointer-events: none; /* la bande ne bloque pas les clics, seuls les boutons réagissent */
}

.actions-flottantes__interieur {
  display: flex;
  justify-content: flex-end;
  gap: var(--ecart);
  width: min(100%, var(--largeur));
  margin-inline: auto;
}

.flottant {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 5px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--rayon-pilule);
  font-family: var(--police);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.flottant--rappel {
  align-self: center;
  background-color: var(--blanc);
  color: var(--orange);
  box-shadow: var(--ombre);
}

.flottant--whatsapp {
  background-color: var(--whatsapp);
  color: var(--blanc);
  box-shadow: var(--ombre);
}

.flottant--appeler {
  background-color: var(--orange);
  color: var(--blanc);
  font-size: 17px;
}

.flottant--whatsapp:focus-visible,
.flottant--appeler:focus-visible {
  outline-color: var(--vert);
}


/* 18. Fenêtre « Être rappelé(e) » ----------------------------------------- */
/* Centrée dans l'écran comme l'original, mais jamais sous l'en-tête :
   quand elle s'allonge (message d'erreur, petit écran), son haut s'arrête à
   118 px et elle défile à l'intérieur. haut = max(50 % de l'écran − la moitié
   de sa hauteur, hauteur de l'en-tête). */
.fenetre {
  top: 50vh;
  top: 50dvh;
  bottom: auto;
  width: 520px;
  max-width: 100vw;
  max-height: calc(100vh - var(--hauteur-entete));
  max-height: calc(100dvh - var(--hauteur-entete));
  margin: 0 auto;
  translate: 0 max(-50%, var(--hauteur-entete) - 50vh);
  translate: 0 max(-50%, var(--hauteur-entete) - 50dvh);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--rayon);
  background-color: var(--blanc);
  box-shadow: var(--ombre-fenetre);
  color: var(--texte);
}

/* Le voile commence sous l'en-tête : dans l'original, l'en-tête reste blanc
   et net par-dessus le fond sombre quand la fenêtre est ouverte.
   Valeurs de secours : les navigateurs plus anciens ne transmettent pas
   les variables au ::backdrop. */
.fenetre::backdrop {
  top: var(--hauteur-entete, 118px);
  background-color: var(--voile-fenetre, rgb(0 0 0 / 74%));
}

/* Comme l'original : le voile sombre est posé d'un coup, seule la fenêtre
   apparaît en fondu (1,2 s). À la fermeture, la fenêtre s'efface avec le même
   fondu joué à l'envers, puis le voile disparaît (classe posée par site.js). */
.fenetre[open] {
  animation: apparition 1.2s ease;
}

.fenetre[open].fenetre--fermeture {
  animation: disparition 1.2s ease reverse forwards;
}

@keyframes apparition {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* mêmes images clés, sous un autre nom pour relancer l'animation */
@keyframes disparition {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fenetre__boite {
  position: relative;
  padding: 26px 52px;
}

.fenetre__fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  padding: 12px;
  border: 0;
  background: none;
  color: #333;
  font-size: 15px;
  cursor: pointer;
}

.carte-devis--fenetre {
  padding: 0;
}

.carte-devis--fenetre .garanties {
  margin-top: -13px;
}


/* 19. Tablette (768 à 1024 px) -------------------------------------------- */
@media (max-width: 1024px) {
  .ouverture {
    margin-top: 112px;
    padding: 13px;
  }

  .carte-devis--ouverture {
    width: 350px;
    padding: 8px 0;
  }

  .ouverture__boutons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ecart);
    padding: 10px;
  }

  .fenetre {
    width: 75vw;
  }
}


/* 20. Téléphone (767 px et moins) ----------------------------------------- */
@media (max-width: 767px) {
  /* En-tête : seul le service client reste à droite du logo */
  .entete__actions {
    align-self: flex-end;
    padding-bottom: 10px;
  }

  .entete__actions > .bouton {
    display: none;
  }

  /* Ouverture */
  .ouverture {
    min-height: 0;
  }

  .ouverture__titre {
    font-size: 32px;
  }

  .ouverture__grille {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding: 0;
  }

  .ouverture__arguments {
    margin-top: -8px;
    padding: 0 8px 0 9px;
  }

  .avis {
    padding: 0;
  }

  .ouverture__sous-titre {
    font-size: 26px;
    text-align: center;
  }

  .ouverture__boutons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .ouverture__boutons .bouton {
    flex: 1 0 100%;
  }

  .carte-devis--ouverture {
    display: none;
  }

  /* Sections */
  .etapes {
    padding: 18px 18px 18px 13px;
  }

  .etapes__liste,
  .expertise__liste {
    flex-wrap: wrap;
  }

  .expertise,
  .realisations,
  .faq {
    padding: 13px;
  }

  .realisations .section__intro {
    margin-top: -18px;
  }

  .realisations__grille {
    grid-template-columns: 1fr;
  }

  /* Sur téléphone, l'original affichait les variantes 768 × 419 des photos */
  .realisation__image img {
    aspect-ratio: 768 / 419;
  }

  .faq__titre {
    text-align: center;
  }

  .contact {
    padding: 12px;
  }

  .contact__interieur {
    flex-wrap: wrap;
  }

  .carte-devis--contact {
    width: 100%;
  }

  .carte-devis--contact .formulaire {
    padding: 0 8px;
  }

  .formulaire__champ {
    width: 100%;
  }

  /* Boutons flottants : WhatsApp et Appeler seulement */
  .actions-flottantes__interieur {
    justify-content: space-around;
  }

  .flottant--rappel {
    display: none;
  }

  /* Fenêtre */
  .fenetre {
    width: 100vw;
  }

  .fenetre__boite {
    padding: 18px 5%;
  }

  .carte-devis--fenetre .carte-devis__titre {
    font-size: 26px;
  }

  .carte-devis--fenetre .formulaire {
    margin-top: -20px;
    padding: 0 3px;
  }
}

/* Petits téléphones (moins de 370 px) : le titre de la fenêtre passerait sous
   le bouton ×. Il se met sur deux lignes, comme celui du bas de page. */
@media (max-width: 369px) {
  .carte-devis--fenetre .carte-devis__titre {
    padding-inline: 30px;
  }
}


/* 21. Préférences d'animation --------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fenetre[open],
  .fenetre[open].fenetre--fermeture {
    animation: none;
  }
}