/* ============================================================
   LF Web — Site vitrine
   Feuille de style unique, organisée dans l'ordre de la page.
   Aucune ressource externe : polices locales, images locales.
   ============================================================ */

/* ------------------------------------------------------------
   POLICES LOCALES
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/caveat-latin.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;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   CHARTE — tokens
   ------------------------------------------------------------ */
:root {
  --fond-sombre: #0E0B1F;
  --fond-clair: #FFFFFF;
  --violet: #5B2EE5;
  --violet-clair: #8B6BF0;
  --encre: #14161A;
  --texte: #5A6068;
  --ligne: #E8E8EE;

  /* Fond de la section « tous les écrans » : relevé sur le visuel qu'elle
     contient (médiane des pixels de fond = #040D18), pour que l'image s'y
     fonde sans bord visible. À réaligner si le visuel est remplacé. */
  --fond-supports: #040D18;

  /* dérivées */
  --violet-fonce: #4A22C9;
  /* Teinte claire du violet, reservee au surtitre de la section contact :
     --violet-clair n'y atteint que 3,3:1 sur le degrade violet. */
  --violet-pale: #C5B5F8;
  --sombre-2: #16122B;
  --sombre-3: #1C1733;
  --texte-clair: rgba(255, 255, 255, .74);
  --ligne-sombre: rgba(255, 255, 255, .12);

  --police: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --police-main: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --rayon: 12px;
  --rayon-petit: 10px;
  --rayon-grand: 18px;

  --conteneur: 1320px;
  --marge-laterale: 24px;

  --hauteur-entete: 76px;
  --hauteur-barre-mobile: 0px;
  --decalage-ancre: 85px;      /* 77 px d'en-tête + 8 */

  --ombre-carte: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px rgba(20, 22, 26, .05);
  --ombre-violette: 0 10px 28px rgba(91, 46, 229, .32);

  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------
   RÉINITIALISATION
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Pas de scroll-padding-top ici : il s'additionnerait au
     scroll-margin-top des sections et doublerait le décalage. */
}

/* Sections visées par une ancre : l'en-tête reste affiché en haut d'écran,
   il faut donc décaler la cible de sa hauteur réelle (77 px au-dessus de
   768 px, 67 px en dessous) plus 8 px de respiration. */
#haut,
#services,
#realisations,
#avis,
#a-propos,
#contact,
#contenu {
  scroll-margin-top: var(--decalage-ancre);
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texte);
  /* fond sombre : la bande reservee sous le pied de page pour la barre
     fixe mobile prolonge le pied de page au lieu de virer au blanc */
  background: var(--fond-sombre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: var(--hauteur-barre-mobile);
}

h1, h2, h3 { margin: 0; color: var(--encre); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
blockquote { margin: 0; }

/* L'attribut `hidden` doit toujours l'emporter. Le `display: none` du
   navigateur vient de sa feuille par défaut : n'importe quelle règle d'ici
   qui pose un `display` (`.formulaire { display: grid }` par exemple) passe
   devant et l'élément reste visible malgré `hidden`. D'où le `!important`. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--violet-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--violet);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--rayon-petit) 0;
}
.lien-evitement:focus { left: 0; }

/* ------------------------------------------------------------
   UTILITAIRES
   ------------------------------------------------------------ */
.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

.section { padding-block: clamp(56px, 6.5vw, 92px); }

.accent { color: var(--violet-clair); }

.surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet);
}
.surtitre::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--violet);
}
.surtitre--clair { color: var(--violet-clair); }
.surtitre--clair::before { background: var(--violet-clair); }

/* Le fond de la section contact est un degrade violet, bien plus clair que
   les autres fonds sombres : --violet-clair n'y passe pas le seuil de 4,5:1.
   Une teinte plus pale est necessaire, ici seulement. */
.contact .surtitre { color: var(--violet-pale); }
.contact .surtitre::before { background: var(--violet-pale); }

.titre-geant {
  font-size: clamp(2.45rem, 6.1vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #fff;
}

.titre-section {
  font-size: clamp(1.8rem, 2.45vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -.03em;
}
.titre-section--clair { color: #fff; }

.icone-fleche {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--rayon-petit);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition), box-shadow var(--transition);
}

.bouton--violet {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
  box-shadow: var(--ombre-violette);
}
.bouton--violet:hover { background: var(--violet-fonce); border-color: var(--violet-fonce); }

.bouton--contour {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.bouton--contour:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }

.bouton--grand { min-height: 56px; padding: 14px 26px; font-size: 16px; }
.bouton--pleine-largeur { width: 100%; }
.bouton:active { transform: translateY(1px); }

.bouton__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  border-radius: 50%;
  background: #fff;
  color: var(--fond-sombre);
}
.bouton__pastille svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------
   ANNOTATIONS MANUSCRITES
   ------------------------------------------------------------ */
.annotation {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  color: var(--violet-clair);
  font-family: var(--police-main);
  font-weight: 600;
  line-height: 1.12;
  pointer-events: none;
}

.annotation__texte {
  display: block;
  font-size: clamp(19px, 1.5vw, 26px);
  white-space: nowrap;
}

.annotation__fleche,
.annotation__sourire {
  flex: 0 0 auto;
  width: 40px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.annotation__sourire { width: 54px; height: 38px; }

/* ------------------------------------------------------------
   1. EN-TÊTE
   ------------------------------------------------------------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(14, 11, 31, .88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.entete.est-defilee {
  background: rgba(14, 11, 31, .97);
  border-bottom-color: var(--ligne-sombre);
}

.entete__grille {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--hauteur-entete);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 48px;
}
/* En-tête : la version horizontale (symbole + mot WEB), 40 px de haut.
   Pied de page : la version empilée, plus grande. Seule la hauteur est
   imposée — `width: auto` conserve les proportions du fichier. */
.logo__image { height: 40px; width: auto; }
.logo--pied .logo__image { height: 96px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  margin-inline: auto;
}
.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  transition: color var(--transition);
}
.nav__lien:hover { color: #fff; }
.nav__lien.est-actif { color: #fff; }
.nav__lien.est-actif::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
}

.entete__devis { flex: 0 0 auto; }
.entete__devis-court { display: none; }

/* ------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fond-sombre);
  padding-top: clamp(36px, 4vw, 54px);
  padding-bottom: clamp(30px, 3.4vw, 44px);
}
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(97deg, var(--fond-sombre) 0%, rgba(14, 11, 31, .97) 22%,
      rgba(14, 11, 31, .74) 36%, rgba(14, 11, 31, .16) 51%, rgba(14, 11, 31, 0) 63%),
    linear-gradient(180deg, rgba(14, 11, 31, .82) 0%, rgba(14, 11, 31, 0) 22%,
      rgba(14, 11, 31, 0) 74%, rgba(14, 11, 31, .9) 100%);
}

.hero__inner { position: static; }

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

.hero__texte { position: relative; z-index: 2; }
.hero__chapo {
  max-width: 34rem;
  margin-top: 22px;
  font-size: 17px;
  color: var(--texte-clair);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* --- Visuel du hero : une seule image (ordinateur + telephone + QR code).
   Au-dela de 1024 px elle tapisse la moitie droite de la section, sa zone
   sombre de gauche passant sous le texte. En dessous de 1024 px elle repasse
   dans le flux, sous le texte, recadree sur les appareils. --- */
.hero__visuel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  z-index: 0;
  pointer-events: none;
}
.hero__visuel picture { width: 100%; height: 100%; }
.hero__visuel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

/* Annotations deja dessinees dans les images fournies : le code est conserve
   (il resservira si les visuels changent) mais l'affichage est coupe. */
.annotation--en-double { display: none !important; }

.annotation--hero-ordinateur { left: 6%; top: -4%; }
.annotation--hero-telephone { right: 14%; top: -6%; }
.annotation--hero-telephone .annotation__fleche { transform: scaleX(-1); }
.annotation--hero-qr { right: 0; bottom: -4%; align-items: flex-end; }

/* --- bande des bénéfices --- */
.benefices {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  max-width: 700px;
  margin-top: clamp(24px, 3vw, 10px);
}
.benefice { display: flex; flex-direction: column; gap: 12px; }
.benefice__icone { color: var(--violet-clair); }
.benefice__icone svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.benefice__court { display: none; }
.benefice__libelle {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, .88);
}

/* ------------------------------------------------------------
   3. SERVICES
   ------------------------------------------------------------ */
.services { background: var(--fond-clair); }

.entete-section {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: start;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(32px, 3.6vw, 46px);
}
.entete-section__secondaire {
  position: relative;
  padding-top: 40px;
  padding-right: clamp(0px, 9vw, 130px);
}
.entete-section__chapo { font-size: 16px; }

.annotation--services {
  right: 0;
  top: -6px;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.annotation--services .annotation__sourire { margin-top: 2px; margin-right: 6px; }

.grille-services {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.carte-service {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 22px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-grand);
  background: var(--fond-clair);
  box-shadow: var(--ombre-carte);
}
/* Rien n'est cliquable dans une carte de service : pas d'effet de survol,
   pas de curseur de lien. La flèche qui le laissait croire a été retirée. */

/* Hauteur fixée à celle du plus grand pictogramme : les cinq titres
   commencent ainsi à la même hauteur, y compris celui de la carte Google
   dont le logo fait 28 px et non 30. */
.carte-service__icone {
  display: flex;
  align-items: center;
  height: 30px;
  color: var(--violet);
}
.carte-service__icone svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carte-service__icone--google img { width: 28px; height: 28px; }

.carte-service__titre {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.carte-service__visuel {
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sombre-2);
  /* les cinq visuels sont en 4:3 : même rapport ici, donc même hauteur
     pour les cinq vignettes et aucun recadrage */
  aspect-ratio: 4 / 3;
}
.carte-service__visuel img { width: 100%; height: 100%; object-fit: cover; }

.liste-coches { margin-top: 18px; display: grid; gap: 9px; }
.liste-coches li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.42;
  color: var(--texte);
}
.liste-coches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background-color: var(--violet);
  -webkit-mask: no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8l5.2 5.2L20 6.6'/%3E%3C/svg%3E");
  mask: no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8l5.2 5.2L20 6.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   4. TOUS SUPPORTS
   ------------------------------------------------------------ */
.supports {
  background: var(--fond-supports);
  color: var(--texte-clair);
}

.supports__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "texte visuel arguments";
  align-items: center;
  gap: clamp(18px, 2vw, 26px);
}

/* Le texte et les arguments passent devant : le léger débordement du visuel
   ne peut jamais recouvrir un texte. */
.supports__texte { grid-area: texte; position: relative; z-index: 1; }
.supports__visuel { grid-area: visuel; z-index: 0; }
.supports__arguments { grid-area: arguments; position: relative; z-index: 1; }

.supports__chapo {
  max-width: 30rem;
  margin-top: 20px;
  font-size: 16px;
  color: var(--texte-clair);
}
.supports__texte .bouton { margin-top: 30px; }

.supports__visuel {
  position: relative;
  background: none;
  /* Le visuel déborde légèrement de sa colonne (18 %, soit 9 % de chaque côté)
     pour que l'annotation manuscrite qu'il contient reste lisible. Le
     débordement reste entièrement dans la zone de fondu : il n'atteint jamais
     les colonnes voisines à pleine opacité, et aucune colonne ne bouge. */
  width: 118%;
  max-width: none;
  margin-left: -9%;
  /* haut : le fondu s'arrête avant l'annotation manuscrite (elle commence à 10,6 %).
     bas : fondu plus long, le sol de la photo est clair et doit se dissoudre. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 84%, transparent 100%);
}
.supports__visuel-image {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 94%, transparent 100%);
}

.annotation--supports { left: 24%; top: -9%; }

.supports__arguments {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.argument {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .045);
}
.argument__icone { flex: 0 0 auto; color: var(--violet-clair); }
.argument__icone svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.argument__titre { font-size: 15px; line-height: 1.3; color: #fff; }
.argument__texte { margin-top: 5px; font-size: 15px; line-height: 1.45; color: var(--texte-clair); }

/* ------------------------------------------------------------
   5. RÉALISATIONS
   ------------------------------------------------------------ */
.realisations { background: var(--fond-clair); }

.realisations__grille {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 56px);
}
.realisations__chapo { margin-top: 18px; font-size: 16px; }

/* Deux réalisations, affichées côte à côte : pas de carrousel. */
.grille-realisations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.carte-realisation { min-width: 0; }
.carte-realisation__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-grand);
  background: var(--fond-clair);
  box-shadow: var(--ombre-carte);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte-realisation__lien:hover {
  border-color: var(--violet-clair);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(20, 22, 26, .1);
}
.carte-realisation__visuel {
  display: block;
  overflow: hidden;
  background: var(--sombre-2);
  aspect-ratio: 16 / 10;
}
.carte-realisation__visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-realisation__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 14px 18px;
}
.carte-realisation__nom {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--encre);
}
.carte-realisation__metier {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texte);
}
.carte-realisation__pied .icone-fleche { color: var(--violet); }

/* ------------------------------------------------------------
   6. AVIS CLIENTS
   ------------------------------------------------------------ */
.avis { background: var(--fond-clair); padding-top: 0; }

.avis__entete { margin-bottom: clamp(24px, 2.8vw, 34px); }

.grille-avis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

/* Carte d'avis : logo rond à gauche, contenu à droite
   (étoiles, texte, prénom, entreprise). */
.avis-card {
  display: flex;
  flex-direction: column;
  /* pas de height: 100% — il résout en auto quand le conteneur n'a pas de
     hauteur propre et annule l'étirement (cartes inégales en mobile).
     `align-items: stretch` sur .grille-avis suffit. */
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-grand);
  background: var(--fond-clair);
  box-shadow: var(--ombre-carte);
}

/* En-tête de carte : logo rond à gauche ; à sa droite le prénom,
   l'entreprise puis les étoiles, empilés. */
.avis-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* flex: 0 0 72px est obligatoire : sans lui le rond s'écrase selon le
   contenu voisin. Bordure sombre — la section est sur fond clair et le
   logo Bat Pro Rénov' a lui-même un fond blanc. */
.avis-logo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(14, 11, 31, 0.12);
}
.avis-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avis-ident { min-width: 0; }
.avis-name { font-weight: 700; margin: 0 0 2px; color: var(--encre); }
.avis-company { opacity: 0.65; margin: 0 0 8px; }

.avis-stars { display: flex; gap: 3px; margin: 0; }
.avis-stars svg {
  width: 16px;
  height: 16px;
  fill: #F5A623;
}

.avis-text { margin: 0; }
/* Un avis peut compter plusieurs paragraphes : l'écart entre eux vient d'ici,
   pas d'une marge par défaut du navigateur. */
.avis-text p { margin: 0; }
.avis-text p + p { margin-top: 12px; }




/* ------------------------------------------------------------
   7. CONTACT
   ------------------------------------------------------------ */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fond-sombre);
  padding-block: clamp(48px, 5.4vw, 74px);
}
.contact__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(97deg, #3C1E97 0%, #2A1566 26%, rgba(20, 15, 48, .94) 52%, rgba(14, 11, 31, .45) 74%, rgba(14, 11, 31, .25) 100%);
}

.contact__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 54px);
}

.contact__chapo {
  max-width: 30rem;
  margin-top: 20px;
  font-size: 16px;
  color: var(--texte-clair);
}

.reassurances {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: 34px;
}
.reassurance { display: flex; align-items: center; gap: 12px; }
.reassurance__icone { flex: 0 0 auto; color: var(--violet-clair); }
.reassurance__icone svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reassurance__libelle { font-size: 15px; line-height: 1.32; color: #fff; }

/* --- formulaire --- */
.contact__formulaire {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon-grand);
  background: rgba(10, 8, 22, .52);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.formulaire { display: grid; gap: 12px; }
.formulaire__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.champ { display: block; margin: 0; }
.champ__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.champ__saisie {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--transition), background var(--transition);
}
.champ__saisie::placeholder { color: rgba(255, 255, 255, .5); }
.champ__saisie:hover { border-color: rgba(255, 255, 255, .28); }
.champ__saisie:focus {
  outline: none;
  border-color: var(--violet-clair);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(139, 107, 240, .28);
}
.champ__saisie--zone { min-height: 112px; resize: vertical; }
.champ__saisie[aria-invalid="true"] { border-color: #FF8A8A; }

.pot-de-miel {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.formulaire .bouton { margin-top: 4px; min-height: 54px; }

.formulaire__statut {
  min-height: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texte-clair);
}
.formulaire__statut:not(:empty) { margin-top: 2px; }
.formulaire__statut.est-succes { color: #8DEBB4; }
/* Rouge éclairci : sur le panneau sombre du formulaire, un rouge pur
   descendrait sous le seuil de contraste lisible. */
.formulaire__statut.est-erreur { color: #FFB1B1; }
.formulaire__statut a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- confirmation d'envoi, affichée à la place du formulaire --- */
.formulaire__confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 44px) 4px;
  text-align: center;
}
.formulaire__confirmation-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(139, 107, 240, .16);
  border: 1px solid rgba(139, 107, 240, .5);
  color: var(--violet-clair);
}
.formulaire__confirmation-icone svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.formulaire__confirmation-titre {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: #fff;
}
.formulaire__confirmation-texte {
  max-width: 26rem;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte-clair);
}


/* ------------------------------------------------------------
   8. PIED DE PAGE
   ------------------------------------------------------------ */
.pied { background: var(--fond-sombre); color: var(--texte-clair); }

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;          /* colonnes calées en haut, pas étirées */
  gap: 24px clamp(20px, 3vw, 44px);
  padding-top: 44px;
  padding-bottom: 24px;
}

.pied__marque { max-width: 320px; }
.pied__description {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}

.pied__intitule {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

.pied__liens { display: grid; gap: 12px; }
.pied__lien {
  display: inline-flex;
  align-items: center;
  /* pas de hauteur imposée : la colonne suit son contenu et l'écart
     entre deux liens est bien celui du `gap` */
  min-height: 0;
  padding-block: 2px;
  font-size: 15px;
  color: rgba(255, 255, 255, .7);
  transition: color var(--transition);
}
.pied__lien:hover { color: #fff; }
.pied__coordonnees { display: grid; gap: 12px; }
.pied__lien--icone {
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}
.pied__lien--icone:hover { color: var(--violet-clair); }
.pied__icone {
  flex: 0 0 20px;
  display: inline-flex;
  color: var(--violet-clair);
}
.pied__icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 4e colonne : séparée par un filet vertical, sur la hauteur du contenu. */
.pied__atouts {
  display: grid;
  gap: 16px;
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.pied__atout {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
}
.pied__atout-icone { flex: 0 0 28px; display: inline-flex; color: var(--violet-clair); }
.pied__atout-icone svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pied__bas {
  margin-top: 24px;
  border-top: 1px solid var(--ligne-sombre);
}
.pied__bas-grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding-block: 6px;
}
.pied__copyright { font-size: 15px; color: rgba(255, 255, 255, .58); }
.pied__legal { display: flex; align-items: center; gap: 14px; }
.pied__lien-legal {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: rgba(255, 255, 255, .58);
  cursor: pointer;
  transition: color var(--transition);
}
.pied__lien-legal:hover { color: #fff; text-decoration: underline; }
.pied__separateur { color: rgba(255, 255, 255, .28); }

/* ------------------------------------------------------------
   BARRE FIXE MOBILE
   ------------------------------------------------------------ */
.barre-mobile {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  gap: 10px;
  padding: 10px var(--marge-laterale);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 11, 31, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ligne-sombre);
}
.barre-mobile__action {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border-radius: var(--rayon-petit);
  font-size: 16px;
  font-weight: 600;
}
.barre-mobile__action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barre-mobile__action--appel {
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.barre-mobile__action--devis { background: var(--violet); color: #fff; }

/* ------------------------------------------------------------
   FENÊTRES MODALES
   ------------------------------------------------------------ */
.modale {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
}
.modale[hidden] { display: none; }
.modale__fond {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 18, .78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modale__boite {
  position: relative;
  width: min(720px, 100%);
  max-height: min(84vh, 760px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--rayon-grand);
  background: var(--fond-clair);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.modale__fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--fond-clair);
  color: var(--encre);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.modale__fermer svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.modale__fermer:hover { border-color: var(--violet); color: var(--violet); }

.modale__titre {
  padding-right: 56px;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}
.modale__contenu { margin-top: 18px; }
.modale__contenu h3 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--encre);
}
.modale__contenu p { font-size: 15px; line-height: 1.6; }
.modale__mention {
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: var(--rayon-petit);
  background: rgba(91, 46, 229, .07);
  border: 1px solid rgba(91, 46, 229, .2);
  color: var(--violet);
  font-size: 15px;
}
.modale__mention em { font-style: normal; font-weight: 700; }

body.est-bloque { overflow: hidden; }

/* ============================================================
   ADAPTATIONS — de la plus large à la plus étroite
   ============================================================ */

/* --- au-delà de 768 px : surtitre à la taille de la maquette --- */
@media (min-width: 769px) {
  .surtitre { font-size: 13px; }
}

/* --- 1200 px --- */
@media (max-width: 1200px) {
  .grille-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .supports__grille {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .supports__visuel { width: 110%; margin-left: -5%; }
}

/* --- 1024 px --- */
@media (max-width: 1024px) {
  body { font-size: 16px; }
  .hero__grille { grid-template-columns: 1fr; }
  .hero__texte { max-width: 44rem; }
  .hero__voile {
    background: linear-gradient(180deg, rgba(14, 11, 31, .85) 0%, rgba(14, 11, 31, 0) 16%,
      rgba(14, 11, 31, 0) 78%, rgba(14, 11, 31, .92) 100%);
  }
  .hero__visuel {
    position: static;
    width: auto;
    aspect-ratio: 16 / 10;
    margin: 24px calc(var(--marge-laterale) * -1) 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .hero__visuel-image { object-position: 100% 50%; }
  .benefices { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; }

  .supports__visuel { width: 104%; margin-left: -2%; }

  .entete-section { grid-template-columns: 1fr; }
  .entete-section__secondaire { padding-top: 0; padding-right: clamp(0px, 16vw, 150px); }
  .annotation--services { top: -34px; }

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

  .contact__grille { grid-template-columns: 1fr; }
  .contact__voile {
    background: linear-gradient(168deg, #3C1E97 0%, #241259 34%, rgba(14, 11, 31, .93) 100%);
  }
}

/* --- 900 px --- */
@media (max-width: 900px) {
  .grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supports__grille {
    grid-template-columns: 1fr;
    grid-template-areas: "texte" "visuel" "arguments";
  }
  .supports__visuel { width: 100%; margin-left: 0; }
  .supports__arguments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 768 px : en-tête simplifiée + barre fixe --- */
@media (max-width: 768px) {
  :root {
    --marge-laterale: 18px;
    --hauteur-entete: 66px;
    --hauteur-barre-mobile: 74px;
    --decalage-ancre: 75px;    /* 67 px d'en-tête + 8 */
  }

  .nav { display: none; }
  .entete__grille { justify-content: space-between; }
  .entete__devis-long { display: none; }
  .entete__devis-court { display: inline; }
  .entete__devis { padding-inline: 20px; }
  .logo__image { height: 34px; }
  .logo--pied .logo__image { height: 80px; }

  .barre-mobile { display: flex; }

  .titre-geant { font-size: clamp(2.1rem, 8.4vw, 2.9rem); }
  .hero__chapo { font-size: 16px; }
  .hero__actions { margin-top: 26px; }
  .hero__actions .bouton { flex: 1 1 100%; }


  .benefices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }

  .annotation--mobile-masquee { display: none; }
  .entete-section__secondaire { padding-right: 0; }

  .grille-realisations { grid-template-columns: 1fr; }
  .supports__arguments { grid-template-columns: 1fr; }

  .grille-avis { grid-template-columns: 1fr; }

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

  .pied__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 36px;
    padding-bottom: 20px;
    /* les blocs suivent leur contenu : pas de vide sous la navigation */
    align-items: start;
    justify-items: stretch;
    text-align: left;
  }
  .pied__marque { max-width: none; }

  /* Telephone et courriel : 44 px de haut minimum au doigt. Le padding fait
     grandir le lien de part et d'autre, le pictogramme reste centre.
     Les liens de navigation, eux, gardent leur hauteur compacte : le pied de
     page a ete resserre volontairement. */
  .pied__lien--icone { padding-block: 10px; }
  /* le filet vertical passe à l'horizontale, au-dessus du bloc */
  .pied__atouts {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  /* --- ligne légale : copyright centré, puis les deux liens sur une
     même ligne, sans le séparateur vertical qui n'a plus de sens. --- */
  .pied__bas { margin-top: 20px; }
  .pied__bas-grille {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-block: 4px;
    text-align: center;
  }
  .pied__copyright { margin-bottom: 14px; }
  .pied__separateur { display: none; }
  .pied__legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 20px;
  }
  .pied__lien-legal { min-height: 36px; }
}

/* ============================================================
   767 px : composition continue
   Le point de bascule est le même que celui du <source media> dans
   index.html. Sous cette largeur, les visuels portrait ne sont plus des
   blocs insérés dans le flux : ils tapissent toute leur section, et le
   contenu se pose par-dessus. Aucun cadre, aucun bord visible.
   ============================================================ */
@media (max-width: 767px) {

  /* --- AVIS : défilement horizontal, une carte à la fois ---
     Le débordement latéral reprend --marge-laterale plutôt qu'une valeur
     fixe : la piste va ainsi exactement d'un bord à l'autre de l'écran,
     sans dépasser le conteneur (sinon la page défilerait de travers). */
  .grille-avis {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-inline: var(--marge-laterale);
    margin-inline: calc(var(--marge-laterale) * -1);
    scroll-padding-inline: var(--marge-laterale);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grille-avis::-webkit-scrollbar { display: none; }

  .grille-avis > * {
    flex: 0 0 88%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .avis-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  .avis-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ligne);
    transition: background var(--transition);
  }
  .avis-dot.is-on { background: var(--violet); }

  /* --- HERO ---
     Sous 768 px, plus aucune superposition : le texte est sur le fond uni
     et l'image revient dans le flux, après les boutons. Son fondu haut et
     bas est porté par la transparence du fichier — donc surtout aucun
     border-radius, aucun fond et aucune bordure, qui recréeraient un bord
     net en coupant le dégradé. */
  .hero {
    padding-top: 4px;
    /* de l'air sous les libellés avant la section suivante */
    padding-bottom: 22px;
  }
  /* Le surtitre disparaît sur mobile — il reste dans le HTML et
     réapparaît au-dessus de 768 px. */
  .hero .surtitre { display: none; }
  /* plus d'écart entre le bloc de texte et l'image : seule la marge
     de 8 px de l'image sépare les deux */
  .hero__grille { gap: 0; }
  .titre-geant { font-size: clamp(1.45rem, 5.8vw, 1.85rem); }
  .hero__chapo {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.4;
  }
  .hero__actions { margin-top: 6px; gap: 8px; }
  .hero__actions .bouton {
    min-height: 0;
    padding-block: 12px;
    font-size: 15px;
  }
  .bouton__pastille { width: 20px; height: 20px; margin-right: 0; }
  .bouton__pastille svg { width: 15px; height: 15px; }
  /* Le voile servait à rendre le texte lisible par-dessus l'image :
     il n'a plus lieu d'être, et il recouvrirait l'image du flux. */
  .hero__voile { display: none; }

  .hero__inner { display: flex; flex-direction: column; }

  .hero__visuel {
    position: static;
    aspect-ratio: auto;
    width: auto;
    height: auto;
    /* pleine largeur d'écran : on ressort du padding du conteneur */
    margin: 4px calc(var(--marge-laterale) * -1) 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    z-index: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__visuel picture { width: 100%; height: auto; }
  .hero__visuel-image {
    width: 100%;
    height: auto;
    object-fit: fill;
    object-position: center;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* Les 4 bénéfices sur une seule rangée, pictogramme au-dessus du libellé.
     Le fondu du bas de l'image enchaîne directement, d'où margin-top: 0. */
  .benefices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;      /* les 4 items calés en haut */
    gap: 8px;
    margin-top: 6px;
  }
  .benefice {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }
  .benefice__icone svg { width: 26px; height: 26px; }
  /* Aucune césure. La taille suit la largeur d'écran parce qu'elle est
     dictée par un seul mot : « accompagnement », 14 lettres, doit tenir
     dans une colonne (83 px à 393 px, 69 px à 320 px). */
  /* Le 4e libellé perd son « Un » : deux lignes au lieu de trois. */
  .benefice__complet { display: none; }
  .benefice__court { display: inline; }
  .benefice__libelle {
    font-size: clamp(8px, 2.42vw, 13px);
    line-height: 1.3;
    -webkit-hyphens: none;
    hyphens: none;
  }

  /* --- TOUS LES ÉCRANS ---
     Sur mobile la section redevient un simple empilement, dans cet ordre :
     surtitre, titre, image, 4 cartes, bouton. L'ordre est donné par la
     propriété `order` — le HTML n'est pas dupliqué.
     `display: contents` sur .supports__texte fait remonter ses enfants
     (surtitre, titre, paragraphe, bouton) au niveau du conteneur, seul
     moyen de placer le bouton après les cartes sans toucher au balisage. */
  .supports__grille {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .supports__texte { display: contents; }

  .supports .surtitre { order: 1; margin-bottom: 14px; }
  .supports__texte h2 {
    order: 2;
    margin-bottom: 22px;
    font-size: clamp(1.45rem, 6.2vw, 1.75rem);
  }
  /* Masqué sur mobile seulement — le texte reste dans le HTML. */
  .supports__chapo { display: none; }

  .supports__visuel {
    order: 3;
    position: static;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--rayon);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .supports__visuel picture { width: 100%; }
  .supports__visuel-image {
    width: 100%;
    height: auto;
    object-fit: fill;
    border-radius: var(--rayon);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .supports__arguments { order: 4; margin-top: 22px; }

  .supports__texte .bouton {
    order: 5;
    width: 100%;
    margin-top: 22px;
  }
}

/* --- 600 px --- */
@media (max-width: 600px) {
  .grille-services { grid-template-columns: 1fr; }
}

/* --- 480 px --- */
@media (max-width: 480px) {
  .avis-head { gap: 12px; }
  .avis-logo { flex: 0 0 64px; width: 64px; height: 64px; }
  .section { padding-block: clamp(44px, 11vw, 62px); }
  .titre-section { font-size: clamp(1.65rem, 7.4vw, 2rem); }
  .annotation__texte { font-size: 19px; }
  .reassurances { gap: 14px 22px; }
  .reassurance { flex: 1 1 42%; }
}

/* --- 360 px --- */
@media (max-width: 360px) {
  :root { --marge-laterale: 14px; }
  .annotation__texte { font-size: 17px; }
  .annotation__fleche { width: 30px; height: 34px; }
  .benefices { gap: 6px; }
  .benefice { gap: 4px; }
  .benefice__icone svg { width: 22px; height: 22px; }
  .reassurance { flex: 1 1 100%; }
  .bouton--grand { padding-inline: 18px; font-size: 15px; }
}

/* ------------------------------------------------------------
   ANIMATIONS D'APPARITION
   ------------------------------------------------------------ */
.apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, .68, .32, 1);
}
.apparait.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .apparait { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   IMPRESSION
   ------------------------------------------------------------ */
@media print {
  .entete, .barre-mobile { display: none !important; }
  body { color: #000; background: #fff; padding-bottom: 0; }
}

/* ------------------------------------------------------------
   PAGES LÉGALES
   mentions-legales.html · politique-de-confidentialite.html
   Même charte que la page d'accueil : bandeau sombre en tête,
   corps de texte sur fond clair, colonne de lecture limitée.
   ------------------------------------------------------------ */
.page-legale__entete {
  background: var(--fond-sombre);
  padding-block: clamp(30px, 3.6vw, 52px);
}
.page-legale__retour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  transition: color var(--transition);
}
.page-legale__retour:hover { color: #fff; }
/* la flèche partagée avec le reste du site, retournée vers la gauche */
.page-legale__retour .icone-fleche { transform: scaleX(-1); }

.page-legale__corps { background: var(--fond-clair); }
.page-legale__contenu { max-width: 760px; }

.page-legale__bloc + .page-legale__bloc { margin-top: clamp(26px, 3vw, 38px); }
.page-legale__titre {
  margin-bottom: 12px;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--encre);
}
.page-legale__bloc p { font-size: 16px; line-height: 1.65; color: var(--texte); }
.page-legale__bloc p + p { margin-top: 10px; }

.page-legale__liste {
  display: grid;
  gap: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
}
.page-legale__liste strong { font-weight: 600; color: var(--encre); }
/* dans un bloc de coordonnées, les lignes se suivent : l'écart vient du
   `gap` de la grille, pas de l'espacement entre paragraphes. */
.page-legale__liste p + p { margin-top: 0; }

.page-legale__contenu a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-legale__contenu a:hover { color: var(--violet-fonce); }

.page-legale__maj {
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--ligne);
  font-size: 15px;
  color: var(--texte);
}

@media (max-width: 480px) {
  .page-legale__bloc p,
  .page-legale__liste { font-size: 15px; }
}