/* ------------------------------------------------------------------
   HexaFlow — reprise à l'identique du site Framer
   Toutes les cotes sont relevées sur www.hexaflow.fr au 19/09/2026,
   viewport 1440 × 900. Les valeurs en commentaire sont les mesures
   d'origine. Ne pas « améliorer » sans relever de nouveau.
   ------------------------------------------------------------------ */

:root {
  --noir: #000000;
  --blanc: #ffffff;
  --gris-titre: #d4d4d4;   /* libellés des chiffres */
  --gris-texte: #a7a7a7;   /* corps des cartes, liens du pied */
  --gris-sous: #828487;    /* sous-libellés des chiffres */
  --filet: #2b2b2c;        /* trait du pied de page */
  --trait-sep: #171717;    /* séparateurs en croix des chiffres */
  --ombre-carte: rgba(45, 30, 133, .1) 0px 4px 30px 0px;

  --titre: 'Petrona', Georgia, serif;
  --corps: 'Inter Reprise', system-ui, sans-serif;
  --chiffre: 'Instrument Sans', 'Inter Reprise', sans-serif;
  --bouton: 'Switzer', 'Inter Reprise', sans-serif;
  --marque: 'Satoshi', 'Inter Reprise', sans-serif;
  --pied-marque: 'Poppins', 'Inter Reprise', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--corps);
  /* Le Framer sert un Inter statique, coupé pour le texte. Celui de Google
     est variable et passe seul à une optique plus étroite au-dessus de
     14px : les lignes gagnent un mot et les blocs perdent une ligne. On le
     fige sur sa coupe texte. « Inter Display » garde son 'opsz' 32, posé
     par font-variation-settings, qui passe devant. */
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h4, h6, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------------------------- Boutons ----------------------------- */
/* Au survol, seul le fond change. Relevé le 25/09 sur le site. */

.bouton {
  display: inline-block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.bouton__boite {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.bouton__lbl {
  font-family: var(--bouton);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4em;
  text-align: center;
  white-space: nowrap;
}
/* Le Framer garde un second libellé « Prendre rendez-vous » dans le bouton,
   masqué. Relevé le 25/09 : le survol ne l'affiche pas, il ne change que le
   fond. On le garde dans le HTML, invisible. */
.bouton__lbl--survol { display: none; }

/* Bouton blanc plein, celui du héros. 131 × 46, padding 9px 22px. */
.bouton--plein .bouton__boite { background: var(--blanc); padding: 9px 22px; transition: background-color .2s ease; }
.bouton--plein:hover .bouton__boite { background: rgb(217, 210, 197); }   /* survol relevé */
.bouton--plein .bouton__lbl { color: #000; font-size: 20px; }

/* Bouton bordé, celui de la barre de navigation. 109 × 38. */
/* Le filet est posé en ombre intérieure : une vraie bordure ajouterait
   2px à la hauteur, or le bouton mesure 38px de haut, pas 40. */
.bouton--borde .bouton__boite {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  padding: 8px 20px;
  background: rgba(242, 234, 220, 0);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.bouton--borde:hover .bouton__boite { background: rgba(255, 255, 255, .61); }   /* survol relevé */
.bouton--borde .bouton__lbl { color: #fff; font-size: 16px; }

/* -------------------------- Navigation ---------------------------- */

/* Relevé sur le site : un bandeau fixe de 58px de haut, pleine largeur,
   transparent au-dessus d'une section sombre, rempli de la couleur de la
   section quand elle est claire. La rangée tient à y = 10, sur 38px. */
.barre {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  padding: 10px max(75px, calc(50% - 645px)) 0;
  transition: background-color .25s ease;
}
/* La rangée est bornée à 1200px : le bouton s'arrête à x = 1275, pas au
   bord de la barre. Cote relevée sur le site. */
.barre__interieur {
  width: 1200px;
  max-width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.barre__marque { display: flex; align-items: center; gap: 11px; color: var(--blanc); }
.barre__hexa { width: 27px; height: 32px; flex: none; }
.barre__marque span {
  font-family: var(--marque);
  font-weight: 500;
  font-size: 18px;
  color: inherit;
}
.barre__liens { display: flex; gap: 20px; }
.barre__liens a {
  font-family: var(--corps);
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.36px;
  color: var(--blanc);
  transition: opacity .2s ease;
}
.barre__liens a:hover { opacity: .65; }

/* La barre prend le noir au-dessus d'une section claire. Le basculement
   se fait pile au bord de la section, cote relevee sur le site. */
.barre__marque, .barre__liens a, .bouton--borde .bouton__lbl {
  transition: color .25s ease;
}
.bouton--borde .bouton__boite { transition: box-shadow .25s ease, background-color .3s ease; }
.barre.sur-clair .barre__marque,
.barre.sur-clair .barre__liens a,
.barre.sur-clair .bouton--borde .bouton__lbl { color: #000; }
/* Au-dessus d'une section claire, le bouton devient une pastille noire
   pleine, texte blanc. Releve sur le site. */
.barre.sur-clair .bouton--borde .bouton__lbl { color: #fff; }
.barre.sur-clair .bouton--borde .bouton__boite { background: #000; box-shadow: none; }
.barre.sur-clair .bouton--borde:hover .bouton__boite { background: #1c1c1c; }

/* ------------------------------ Héros ----------------------------- */

.heros {
  position: relative;
  height: 100vh;
  min-height: 620px;
  background: var(--noir);
  overflow: hidden;
}
.heros__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.heros__bloc {
  position: absolute;
  /* x = 300 sur la toile de 1440, puis suit le centre au-delà. */
  left: calc(50% - 420px);
  bottom: 80px;             /* padding-bottom de la section */
  right: calc(50% - 680px);
  z-index: 2;
}
.heros__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 37px;
  line-height: 37px;
  letter-spacing: -1.48px;
  color: var(--blanc);
}
.heros__texte {
  margin-top: 21px;
  max-width: 473px;
  font-family: var(--corps);
  font-size: 20px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(255, 255, 255, .61);
}
.heros__action { margin-top: 29px; display: flex; }

/* ----------------------------- Chiffres --------------------------- */

.chiffres { background: var(--noir); padding: 120px 42px 5px; }
.chiffres__grille {
  width: 1000px;
  max-width: 100%;
  min-height: 340px;        /* section relevée à 465 : 120 + 340 + 5 */
  margin-inline: auto;
  display: grid;
  /* colonnes et gouttières relevées : 231 / 30 / 231 / 16 / 231 / 30 / 231 */
  grid-template-columns: 231fr 30fr 231fr 16fr 231fr 30fr 231fr;
}
.chiffre { position: relative; }
.chiffre:nth-child(1) { grid-column: 1; }
.chiffre:nth-child(2) { grid-column: 3; margin-top: 86px; }
.chiffre:nth-child(3) { grid-column: 5; }
.chiffre:nth-child(4) { grid-column: 7; margin-top: 86px; }

.chiffre__num {
  display: block;
  font-family: var(--chiffre);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.23;
  letter-spacing: -2.4px;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.chiffre__label {
  display: block;
  margin-top: 8px;
  font-family: var(--corps);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.72px;
  color: var(--gris-titre);
}
.chiffre__sous {
  display: block;
  margin-top: 4px;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.48px;
  color: var(--gris-sous);
}
.chiffre__pile { display: flex; margin-top: 34px; }
.chiffre__pile img { width: 50px; height: 50px; object-fit: cover; }
.chiffre__pile img + img { margin-left: -20px; }
.chiffre__pile--rond img { border-radius: 40px; }
.chiffre__pile--carre img { border-radius: 8px; }
.chiffre__pile--carre img:last-child { border-radius: 10px; }
/* Contour de 3px posé à l'intérieur de chaque vignette, comme le ::after du
   Framer : gris 424242 sur les visages, 292929 sur les projets. L'outline
   rentré passe par-dessus l'image, une bordure l'aurait rétrécie. */
.chiffre__pile img { outline: 3px solid; outline-offset: -3px; }
.chiffre__pile--rond img { outline-color: #424242; }
.chiffre__pile--carre img { outline-color: #292929; }

/* Croix de séparation, collée au bord droit des colonnes 1 et 3. */
.chiffre__croix {
  position: absolute;
  top: 128px;
  right: 0;
  width: 40px;
  height: 80px;
}

/* ------------------------------ Cartes ---------------------------- */

.cartes { background: var(--noir); padding: 82px 42px 140px; }
.cartes__pile {
  width: 726px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
/* Les deux cartes basses sont en retrait de 5px dans la pile : 346 + 25 + 346. */
.cartes__duo { display: flex; gap: 25px; padding: 0 5px; }
.cartes__duo > * { flex: 1; min-width: 0; }

.carte {
  display: block;
  background: var(--noir);
  border-radius: 15px;
  padding: 6px;
  box-shadow: var(--ombre-carte);
}
.carte__corps { padding: 20px 20px 0; }
.carte__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 22px;
  line-height: 24.2px;
  letter-spacing: -0.44px;
  color: var(--blanc);
}
.carte__texte {
  margin-top: 3px;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 300;
  line-height: 22.4px;
  letter-spacing: -0.32px;
  color: var(--gris-texte);
}
/* La vue est cadrée dans le même retrait de 20px que le texte. */
.carte__vue {
  margin: 23px 20px 20px;
  border-radius: 10px;
  overflow: hidden;
}
.carte__vue img {
  width: 100%;
  height: 400px;            /* grande carte : 674 × 400 */
  object-fit: cover;
  border-radius: 10px;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cartes__duo .carte__texte { margin-top: 10px; }
.cartes__duo .carte__vue { margin-top: 25px; }
.cartes__duo .carte__vue img { height: 229px; }   /* petites cartes : 294 × 229 */
.carte:hover .carte__vue img { transform: scale(1.02); }

/* ------------------------------- Pied ----------------------------- */

.pied { background: var(--noir); padding: 70px max(75px, calc(50% - 645px)) 88px; }
.pied__haut { display: grid; grid-template-columns: 887px 1fr; min-height: 260px; }
.pied__gauche {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pied__marque { display: flex; align-items: center; gap: 10px; }
.pied__marque img { width: 36px; height: 40px; object-fit: contain; }
.pied__marque span {
  font-family: var(--pied-marque);
  font-weight: 300;
  font-size: 19px;
  line-height: 22.8px;
  color: var(--blanc);
}
.pied__social p, .pied__social a {
  font-family: var(--bouton);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.32px;
  color: var(--gris-texte);
}
.pied__ligne { display: flex; align-items: center; gap: 20px; }
.pied__ligne img { width: 20px; height: 20px; object-fit: contain; }
.pied__titre {
  font-family: var(--corps);
  font-variation-settings: 'opsz' 32;   /* « Inter Display » en ligne */
  font-weight: 600;
  font-size: 22px;
  line-height: 24.2px;
  letter-spacing: -0.44px;
  color: var(--blanc);
}
/* 7 liens de 20px, 6 gouttières de 12,5px : le bloc fait 215px,
   soit 260px avec le titre. Cote relevée sur le site. */
.pied__liste { margin-top: 21px; display: grid; gap: 12.5px; }
.pied__liste a, .pied__villes a {
  font-family: var(--bouton);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.32px;
  color: var(--gris-texte);
  transition: color .2s ease;
}
/* Les liens du pied mesurent 20px de haut sur le site, pas 22 : la
   hauteur du bloc en dépend (7 liens, 6 gouttières, 215px au total). */
.pied__liste a, .pied__villes a { display: block; line-height: 20px; }
.pied__liste a:hover, .pied__villes a:hover, .pied__bas a:hover { color: var(--blanc); }

.pied__villes {
  margin-top: 24px;
  padding-top: 25px;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  column-gap: 21px;
  row-gap: 24px;
}
.pied__bas {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 21px;
}
.pied__bas p, .pied__bas a {
  font-family: var(--bouton);
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  letter-spacing: -0.28px;
  color: var(--gris-texte);
}

/* --------------------------- Apparitions -------------------------- */
/* Framer fait monter chaque bloc de quelques pixels à l'entrée dans le
   cadre. Même chose ici, sans dépendance. */

.monte {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.3s cubic-bezier(.4, 0, .2, 1), transform 1.3s cubic-bezier(.4, 0, .2, 1);
}
.monte.est-vu { opacity: 1; transform: none; }

/* Les grands titres s'ecrivent mot a mot : opacite 0, flou 5px, 10px
   plus bas, 70ms de decalage entre deux mots. */
.mots .mot {
  display: inline-block;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(10px);
  transition: opacity .8s cubic-bezier(.16, .84, .44, 1),
              filter .8s cubic-bezier(.16, .84, .44, 1),
              transform .8s cubic-bezier(.16, .84, .44, 1);
}
.mots.est-vu .mot { opacity: 1; filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .monte { opacity: 1; transform: none; transition: none; }
  .mots .mot { opacity: 1; filter: none; transform: none; transition: none; }
}

/* --------------------------- Adaptatif ---------------------------- */

@media (max-width: 1200px) {
  .heros__bloc { left: 20.8vw; right: 40px; }
}

/* Les colonnes de chiffres s'empilent, avec le décalage de 41px conservé
   sur les blocs pairs : écarts relevés sur le site, 118 / 75 / 115. */
@media (max-width: 1024px) {
  .barre__liens { display: none; }
  .chiffres__grille {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 75px;
  }
  .chiffre:nth-child(n) { grid-column: 1; margin-top: 0; }
  .chiffre:nth-child(even) { margin-top: 41px; }
  .chiffre__croix { display: none; }
  .cartes__pile { width: 100%; }
  .cartes__duo { flex-direction: column; gap: 21px; padding: 0 7px; }
  .pied__haut { grid-template-columns: 1fr; min-height: 0; gap: 56px; }
}

/* Cotes relevées à 390 : texte du héros à x = 51, titre toujours en 37px,
   photo différente, cartes de 360 et 346 de large. */
@media (max-width: 810px) {
  .barre { padding: 10px 20px 0; }

  .heros__bloc { left: 51px; right: 51px; bottom: 101px; }
  .heros__titre { max-width: 289px; }
  .heros__texte { margin-top: 41px; max-width: 231px; }

  .chiffres { padding: 52px 32px 5px; }
  .cartes { padding: 144px 15px 140px; }
  .carte__vue img { height: 143px; }
  .cartes__duo .carte__vue img { height: 157px; }

  /* Le pied passe en colonne unique : une ville par ligne, une mention
     légale par ligne. Cotes relevées à 390. */
  .pied { padding: 80px 15px 88px; }
  .pied__titre { font-size: 19px; line-height: 20.9px; letter-spacing: -0.19px; }   /* relevé en 390 */
  .pied__villes { flex-direction: column; column-gap: 0; row-gap: 10px; }
  .pied__villes a, .pied__liste a { line-height: 22px; }
  .pied__bas { flex-direction: column; gap: 8px; }
}

/* ------------------------ Consentement cookies --------------------- */
/* Bandeau de consentement à la mesure d'audience (assets/consentement.js).
   Deux boutons identiques : la CNIL veut qu'on refuse aussi facilement
   qu'on accepte. Carte blanche, lisible sur les pages sombres comme sur
   les études de cas. */
.consentement {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 100;
  width: min(420px, calc(100% - 40px));
  padding: 20px;
  border: 1px solid #e7e6e2;
  border-radius: 14px;
  background: #fff;
  color: #111;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .18);
  font-family: var(--corps);
  font-size: 14px;
  line-height: 1.5;
}
.consentement__texte { margin: 0; color: #3d3d3d; }
.consentement__texte a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.consentement__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.consentement__bouton {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease;
}
.consentement__bouton:hover { background: #2a2a2a; }
@media (max-width: 560px) {
  .consentement { left: 16px; right: 16px; bottom: 16px; width: auto; }
}