/* ============================================================
   Agence PM — feuille de style
   Reproduction de la version Webflow d'origine (capture mars 2025).
   Valeurs reprises du fichier agence-pm.webflow.css d'origine.
   ============================================================ */

:root{
  /* couleurs d'origine */
  --blacker:#1c1a1f;          /* fond de page */
  --black-2:#0f1213;
  --amber:#0f1213;
  --pureblack:#000;
  --white:#fffefe;
  --pinkk:#9f3db3;
  --dark-orange:#ff8600;
  --dark-orange-2:#fc921d;
  --sandy-brown:#ffa848;
  --dark-orchid:#7f3db3;
  --muted:#ecf0ef;
  --label-gray:#cdd3d2;

  /* dégradés d'origine */
  --grad-band:linear-gradient(99deg,#9f3db3,#fc921d 82%);
  --grad-text:linear-gradient(48deg,#9f3db3,#fc921d 64%);
  --grad-button:linear-gradient(to right,#b16cea 20%,#ff5e69 60%,#ff8a56 80%,#ffa84b 90%);
  --grad-button-rev:linear-gradient(to left,#b16cea 20%,#ff5e69 60%,#ff8a56 80%,#ffa84b 90%);
  --grad-price:linear-gradient(to right,#b16cea,#ff5e69 38%,#ff8a56 73%,#ffa848);

  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif;

  --max:80vw;
  --radius-card:12px;
  --radius-price:16px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  /* L'en-tête est collant (74px sur téléphone). Sans cette marge, un lien
     de menu (#services, #portfolio…) amène la section à 0 : son titre
     passait sous l'en-tête et les premiers mots étaient masqués. */
  scroll-padding-top:86px;
  /* Les liens de menu défilent au lieu de sauter d'un coup. Mesuré avant :
     la page arrivait en UNE seule valeur de scrollY (aucune image
     intermédiaire) — tools/probe-anchor-scroll.py. */
  scroll-behavior:smooth;
}

/* Mouvement réduit : on rend le défilement instantané, sans exception.
   Le carrousel et l'orbite suivent déjà cette préférence (script.js). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--blacker);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:16px;      /* base de l'originale : tous les « em » en dépendent */
  line-height:24px;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

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

h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;}

p{margin:0;}

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

/* texte en dégradé, comme à l'origine */
.gradient-text{
  background-image:var(--grad-text);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

/* typographie de section */
.h2{
  font-family:var(--font-display);
  font-size:3em;                /* 48px */
  line-height:1.2em;
  margin:0 0 24px;
  color:var(--white);
}
.h2.center{text-align:center;}

.body-lg{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:300;
  line-height:1.65em;
  color:var(--white);
}
.body-lg.center{text-align:center;}

/* ---------- bouton dégradé (En-tête / Visitez le site / Envoyer) ---------- */
.btn-gradient{
  display:inline-block;
  color:#fff;
  background-image:var(--grad-button);
  border-radius:40px;
  padding:10px 20px;
  font-family:var(--font-display);
  font-size:1.1em;
  font-weight:600;
  line-height:156%;
  transition:background-image .2s ease, transform .2s ease;
}
.btn-gradient:hover{background-image:var(--grad-button-rev);}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:10px;
  background-color:rgba(28,26,31,0);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  box-shadow:0 1px 5px 0 var(--blacker);
}

.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:90vw;
}

.brand img{height:64px;width:auto;}

.nav-menu{
  display:flex;
  align-items:center;
  gap:20px;
  font-family:var(--font-display);
  font-weight:500;
  flex:1;
  justify-content:flex-end;
}

.nav-links{display:flex;align-items:center;}

.nav-link{
  display:flex;
  align-items:center;
  padding:20px 20px 20px 0;   /* .w-nav-link de Webflow : 20px de marge haute/basse */
  color:var(--white);
  font-size:1.1em;
  text-shadow:1px 0 6px #000;
  transition:color .25s;
}
.nav-link:hover{color:var(--dark-orange);}
.nav-link-hide{display:none;}

.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  background:none;border:0;cursor:pointer;
  padding:10px;
}
.nav-burger span{
  display:block;height:2px;width:100%;
  background:var(--dark-orange);
  border-radius:2px;
}

/* ============================================================
   HÉROS
   ============================================================ */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding-top:7em;
  padding-bottom:7em;
  overflow:hidden;
}

.hero-grid{
  display:grid;
  /* l'originale laisse le titre prendre sa largeur naturelle et le cercle
     déborder légèrement la marge de 80vw — on reproduit cette géométrie */
  grid-template-columns:max-content 260px;
  gap:16px;
  width:var(--max);
  align-items:center;
  justify-content:start;
}

.hero-label{
  grid-column:1;
  grid-row:1;
  align-self:end;
  max-width:480px;
  margin-bottom:auto;
  color:var(--label-gray);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.6em;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.hero-title{
  grid-column:1;
  grid-row:2;
  font-family:var(--font-display);
  font-size:5em;              /* 80px */
  font-weight:700;
  line-height:1.1em;
  color:var(--white);
  margin:0 0 24px;
}

/* ------------------------------------------------------------
   cercle « estimation gratuite »
   Les deux anneaux de l'originale sont dessinés dans un seul SVG
   (centres 145,115 r114.5 et 97,115 r96 → l'écart d'origine est
   conservé) pour qu'ils puissent tourner en restant concentriques.
   ------------------------------------------------------------ */
.demo-circle{
  grid-column:2;
  grid-row:1 / span 2;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  justify-self:end;
  align-self:center;
  width:260px;
  height:230px;
  color:var(--sandy-brown);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.4em;
  letter-spacing:.1em;
  text-transform:uppercase;
  /* Le tracking s'anime sur la MÊME courbe que la couleur : les deux bougent
     ensemble au lieu que l'une arrive avant l'autre. Durée un peu plus longue
     que .5s pour que la progression soit perceptible et non un à-coup. */
  transition:letter-spacing .6s cubic-bezier(.22,.61,.36,1),
             color .4s ease;
}
.demo-circle:hover{color:var(--dark-orange);letter-spacing:.3em;}

.demo-circle-text{
  position:relative;
  z-index:2;
  /* La boîte doit contenir le mot le plus long DÉJÀ ESPACÉ (0.3em), sinon le
     texte déborde du dessin pendant la transition et paraît sauter. Mesuré
     (tools/probe-width.py) : « ESTIMATION » fait 149px au survol. */
  width:164px;
  text-align:center;
  transition:color .4s ease;
}

/* le dessin lui-même */
.demo-orbit{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.orbit-ring{
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
}

/* L'anneau au repos est EXACTEMENT celui de l'originale : trait plein
   de 1px dans la couleur du cercle. */
.orbit-track{
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  opacity:1;
  transition:stroke-width .4s ease;
}

/* Une lumière parcourt l'anneau : une tête vive suivie d'une queue.
   Le dégradé est appliqué au CONTOUR du cercle, donc il reste
   réparti sur toute la circonférence au lieu de s'étirer. */
.orbit-comet{
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:150 570;    /* tête + longueur de la comète (2πr=719.6) */
  stroke-dashoffset:0;
  opacity:.9;
}
.orbit-ring-b .orbit-comet{
  stroke-dasharray:110 493;    /* 2πr = 603.2 */
  stroke-width:1.75;
  opacity:.75;
}

/* rotation des anneaux + course de la comète */
@media (prefers-reduced-motion:no-preference){
  .orbit-ring-a{animation:orbit-spin 26s linear infinite;}
  .orbit-ring-b{animation:orbit-spin-rev 19s linear infinite;}
  .orbit-comet{animation:orbit-comet-a 7s cubic-bezier(.45,.05,.55,.95) infinite;}
  .orbit-ring-b .orbit-comet{animation:orbit-comet-b 9.5s cubic-bezier(.45,.05,.55,.95) infinite;}
}

/* survol : la course s'accélère et le trait s'affine en s'épaississant */
.demo-circle:hover .orbit-track{stroke-width:1.4;}
.demo-circle:hover .orbit-comet{opacity:1;stroke-width:2.6;}
.demo-circle:hover .orbit-ring-a{animation-duration:9s;}
.demo-circle:hover .orbit-ring-b{animation-duration:6.5s;}
.demo-circle:hover .orbit-comet{animation-duration:3.5s;}
.demo-circle:hover .orbit-ring-b .orbit-comet{animation-duration:4.5s;}

@keyframes orbit-spin{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}
@keyframes orbit-spin-rev{
  from{transform:rotate(0deg);}
  to  {transform:rotate(-360deg);}
}
/* la comète fait le tour du cercle puis repart, avec un léger arrêt */
@keyframes orbit-comet-a{
  from{stroke-dashoffset:0;}
  to  {stroke-dashoffset:-719.6;}
}
@keyframes orbit-comet-b{
  from{stroke-dashoffset:0;}
  to  {stroke-dashoffset:603.2;}
}

/* Mouvement réduit : les anneaux restent exactement comme l'originale,
   nets et immobiles. On garde un tracé fixe, aucune animation. */
@media (prefers-reduced-motion:reduce){
  .orbit-ring-a,.orbit-ring-b,.orbit-comet{animation:none;}
  .orbit-comet{opacity:.55;}
  .orbit-track{stroke-width:1;}
  .demo-circle,
  .demo-circle-text{transition:none;}
}

/* ============================================================
   BANDE DÉFILANTE
   ============================================================ */
.band{
  position:relative;
  width:100vw;
  max-width:100vw;
  overflow:hidden;
  background-image:var(--grad-band);
  padding:20px 0;
}

.band-track{
  display:flex;
  width:max-content;
  animation:band-scroll 28s linear infinite;
}

.band-group{
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.band-item{
  font-family:var(--font-display);
  font-size:38px;          /* .rotate-heading de l'originale */
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.6em;
  color:#fff;
  padding:0 18px;
}

.band-dot{
  width:12px;height:12px;
  border-radius:100%;
  background-color:var(--black-2);
  border:2px solid var(--blacker);
  margin-top:15px;
  flex:none;
}

@keyframes band-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (prefers-reduced-motion:reduce){
  .band-track{animation:none;}
}

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
.section{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding-top:7rem;
  padding-bottom:7rem;
}

.wrap-80{width:var(--max);margin:0 auto;}

.center-section{
  align-items:center;
  padding-bottom:0;
}
.center-section > .h2{margin-bottom:16px;}

/* ============================================================
   SERVICES — trois cartes
   ============================================================ */
.three-cards{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  margin-top:60px;   /* l'originale laisse 84px sous le titre, pas 24px */
}

/* la section services de l'originale n'a pas de marge basse : la galerie
   qui suit apporte la sienne */
#services{padding-bottom:48px;}

.card{
  display:grid;
  grid-template-rows:auto auto;
  align-content:space-between;
  gap:16px;
  min-height:350px;
  padding:36px;
  background-color:var(--pureblack);
  border-radius:var(--radius-card);
  overflow:hidden;
  position:relative;
}

.card-top{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  margin-right:-36px;        /* la ligne file jusqu'au bord, comme à l'origine */
}

.card-icon{
  display:flex;
  justify-content:center;
  align-items:center;
  width:48px;height:48px;
  padding:15px;
  border:1px solid var(--dark-orange);
  border-radius:100%;
  flex:none;
}
.card-icon img{width:18px;height:18px;}

.card-rule{height:1px;background-color:var(--dark-orange);}

.card-text h3{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  line-height:30px;
  margin-bottom:16px;
  color:var(--white);
}

/* ============================================================
   PORTFOLIO — carrousel pleine largeur
   La piste défile nativement (scroll-snap) : le glissement au doigt,
   la molette et les flèches du clavier marchent sans JavaScript.
   Le JS ne fait qu'ajouter les boutons, les points et l'auto-avance.
   ============================================================ */
.portfolio{
  padding-bottom:0;
  overflow:hidden;      /* les vignettes voisines ne créent pas de scroll */
}

/* La barre de contrôle (points + flèches) touchait la section suivante :
   la marge ci-dessous est l'air demandé après le carrousel. */
.portfolio .carousel-bar{
  margin-bottom:clamp(2.5rem,5vw,5rem);
}

.portfolio .h2{margin-bottom:12px;}
.portfolio .body-lg.center{
  margin-bottom:clamp(2rem,4vw,3.5rem);
  color:var(--label-gray);
}

/* la gouttière latérale : les vignettes ne collent jamais au bord de l'écran */
.carousel{
  --gutter:max(2.5vw,24px);
  --slide-gap:clamp(14px,1.6vw,24px);
  position:relative;
  width:100%;
}

.carousel-track{
  display:flex;
  gap:var(--slide-gap);
  margin:0;
  padding:0 var(--gutter);
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  /* Pas de scroll-snap CSS ici : à trois vignettes visibles, les deux
     dernières ne peuvent jamais s'aligner à gauche, donc le snap natif
     ramenait la piste ailleurs que sur les positions des points de
     navigation. Le JS cale le repos sur les mêmes positions (voir
     script.js) ; le glissement natif au doigt reste intact. */
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.carousel-track::-webkit-scrollbar{display:none;}

/* espace de fin : la dernière vignette peut s'aligner sur la marge */
.carousel-track::after{
  content:"";
  flex:0 0 max(0px,calc(var(--gutter) - var(--slide-gap)));
}

.carousel-track:focus-visible{
  outline:2px solid var(--dark-orange);
  outline-offset:4px;
  border-radius:8px;
}

.carousel-slide{
  flex:0 0 clamp(248px,30vw,432px);
}

.carousel-figure{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-card);
  background-color:var(--pureblack);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .5s cubic-bezier(.22,.61,.36,1);
}

/* Le cadrage est une DÉCISION, pas un 1:1 : un site, une carte
   d'affaires et un carton n'ont pas la même forme. Le format 16/10
   est le point commun le plus large qui ne coupe pas les mises en
   page web. Les visuels sont recadrés avec object-position:top pour
   que la navigation des maquettes reste visible. */
.carousel-slide img{
  width:100%;
  /* Sans height:auto, l'attribut height="3000" du HTML impose une hauteur
     définie et aspect-ratio est ignoré : la piste mesurait 3000px de haut. */
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  border-radius:var(--radius-card);
  transition:transform 7s cubic-bezier(.22,.61,.36,1),
             filter .5s ease;
  filter:saturate(.94);
}

/* défilement : la vignette se met en avant quand elle est au centre */
.carousel-slide.is-active .carousel-figure{
  box-shadow:0 0 0 1px rgba(255,132,0,.55), 0 18px 40px -22px rgba(0,0,0,.9);
}
.carousel-slide.is-active img{
  transform:scale(1.035);
  filter:saturate(1);
}

/* barre de contrôle sous le carrousel, alignée sur la marge 80vw */
.carousel-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:clamp(1.25rem,2vw,2rem);
}

.carousel-dots{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  /* les pastilles sont de vraies cibles de 44px : un ::before invisible
     agrandissait la zone cliquable mais laissait un bouton de 9px, ce
     qu'un lecteur d'écran et le test tactile mesurent tous les deux. */
  gap:0;
}

.carousel-dot{
  --pill:9px;
  width:44px;height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  display:grid;
  place-items:center;
}
/* la pastille visible, dessinée dans la cible */
.carousel-dot::before{
  content:"";
  display:block;
  width:var(--pill);
  height:9px;
  border-radius:100%;
  background-color:#4a4a50;
  transition:width .45s cubic-bezier(.22,.61,.36,1),
             background-image .35s ease,
             background-color .35s ease;
}

.carousel-dot:hover::before{background-color:var(--sandy-brown);}

.carousel-dot[aria-selected="true"]{--pill:28px;}
.carousel-dot[aria-selected="true"]::before{
  background-image:var(--grad-price);
  background-color:transparent;
}

.carousel-arrows{display:flex;gap:12px;flex:none;}

.carousel-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:100%;
  background-color:transparent;
  color:var(--white);
  cursor:pointer;
  transition:background-color .3s ease,
             border-color .3s ease,
             color .3s ease,
             transform .3s cubic-bezier(.22,.61,.36,1),
             opacity .3s ease;
}
.carousel-btn:hover:not(:disabled){
  background-image:var(--grad-price);
  border-color:transparent;
  color:#1c1a1f;
  transform:scale(1.06);
}
.carousel-btn:active:not(:disabled){transform:scale(.96);}

.carousel-btn:disabled{
  opacity:.32;
  cursor:default;
}

/* ============================================================
   PROJET VEDETTE
   ============================================================ */
.featured-section{padding-top:0;padding-bottom:0;}

.featured{
  display:grid;
  /* La photo source est un carré 720x720. Avec height:100% elle imposait sa
     hauteur à la carte et laissait une bande noire sous le texte. On serre la
     colonne image (elle était à 50%) et on laisse la hauteur suivre le texte. */
  grid-template-columns:minmax(0,0.78fr) minmax(0,1fr);
  align-items:stretch;
  gap:0;
  width:var(--max);
  background-color:var(--pureblack);
  border-radius:var(--radius-card);
  overflow:hidden;
}

/* La photo ne participe pas au calcul de hauteur : elle remplit la case.
   En grid, un enfant en height:100% retombe sur sa hauteur intrinsèque et
   regonfle la rangée — d'où la bande noire. Le conteneur absolu règle ça. */
.featured-media,
.testimonial-media{
  position:relative;
  min-height:0;
}

.featured-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  /* Le visuel vedette est une affiche composée (logo + texte) : la recadrer
     coupait le logo. On la montre entière, centrée sur le noir de la carte. */
  object-fit:contain;
  object-position:center;
}

.featured-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,3.2vw,52px) clamp(24px,4.5vw,72px) clamp(28px,3.2vw,52px) clamp(24px,2.6vw,40px);
}

.featured-rule{
  width:63px;height:1px;
  background-color:var(--dark-orange);
  margin-bottom:24px;
}

.featured-body h3{
  font-family:var(--font-display);
  font-size:2em;
  font-weight:700;
  line-height:1.3em;
  margin-bottom:24px;
  color:var(--white);
}

.featured-body .body-lg{margin-bottom:24px;}

/* Le corps est devenu une colonne flex : sans ça, le bouton s'étirait sur
   toute la largeur au lieu de rester à la largeur de son texte. */
.featured-body .btn-gradient{align-self:flex-start;}

/* ============================================================
   FORFAITS
   ============================================================ */
.pricing-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:880px;
  margin:0 auto 40px;
}

.pricing-kicker{
  color:#fff;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  line-height:120%;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:20px;
}

.pricing-title{
  font-family:var(--font-display);
  font-size:38px;
  font-weight:700;
  line-height:115%;
  color:#fff;
  margin-bottom:32px;
}

/* interrupteur mensuel / total */
.toggle-row{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
}

.toggle-label{
  color:#fff;
  font-family:var(--font-display);
  font-size:20px;
  line-height:120%;
}

/* le bouton garde son apparence de 34px mais offre une cible de 44px */
.toggle{
  position:relative;
  display:flex;
  align-items:center;
  width:70px;height:44px;
  margin:0 25px;
  padding:0 0 0 5px;
  border:0;
  border-radius:20px;
  background:none;
  cursor:pointer;
}
.toggle::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:50%;
  height:34px;
  transform:translateY(-50%);
  border-radius:20px;
  background-color:#fff;
}

.toggle-dot{
  position:relative;
  z-index:1;
  width:28px;height:28px;
  border-radius:100%;
  background-image:linear-gradient(135deg,#b16cea 17%,#ff5e69 55%,#ffa848);
  transform:translateX(0);
  transition:transform .25s ease;
}
.toggle[aria-checked="true"] .toggle-dot{transform:translateX(29px);}

/* rangée de trois forfaits */
.price-grid[hidden]{display:none;}

.price-grid{
  display:flex;
  justify-content:center;
  align-items:stretch;
  margin-top:100px;   /* l'originale laisse 134px sous la bascule */
}

/* l'attribut hidden doit l'emporter sur display:flex, sinon les deux
   grilles (mensuel + total) s'affichent l'une sous l'autre */


.price-box{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:31%;
  min-height:640px;
  margin:0 1%;
  padding:40px;
  background-color:var(--pureblack);
  border-radius:var(--radius-price);
}

.price-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  margin-bottom:40px;
  border-bottom:1px solid #333;
  padding-bottom:8px;
}

.price-plan{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  line-height:120%;
  margin-bottom:16px;
  color:var(--white);
}

.price-amount{
  font-family:var(--font-display);
  font-size:46px;
  font-weight:700;
  line-height:120%;
  letter-spacing:0;
  margin-bottom:48px;
  background-image:var(--grad-price);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.price-suffix{
  font-size:16px;
  font-weight:400;
  line-height:100%;
  letter-spacing:1px;
  margin-left:10px;
  display:inline;
}

.price-note{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  line-height:24px;
  letter-spacing:.3px;
  margin-bottom:32px;
  color:var(--white);
}

.price-list{
  list-style:none;
  margin:0 0 40px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* l'originale ne pousse pas le bouton au fond : il suit simplement la liste */
.btn-price{margin-top:0;}

.price-list li{
  position:relative;
  padding-left:32px;
  margin-bottom:20px;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:400;
  line-height:130%;
  letter-spacing:.5px;
  color:var(--white);
}

.price-list li::before{
  content:"";
  position:absolute;
  left:0;top:3px;
  width:17px;height:15px;
  background-color:var(--white);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'><path d='M16.8288 2.55001L14.7348 0.450014C14.6644 0.379483 14.5689 0.339844 14.4693 0.339844C14.3697 0.339844 14.2741 0.379483 14.2038 0.450014L5.3598 9.30001C5.28944 9.37055 5.19392 9.41018 5.0943 9.41018C4.99467 9.41018 4.89915 9.37055 4.82879 9.30001L2.73479 7.20001C2.66444 7.12948 2.56892 7.08984 2.4693 7.08984C2.3696 7.08984 2.27408 7.12948 2.20373 7.20001L0.109727 9.30001C0.0393701 9.37055 -0.0561523 9.41018 -0.155832 9.41018C-0.255512 9.41018 -0.351033 9.37055 -0.421391 9.30001C-1.64609 8.07001 -1.64609 6.08001 -0.421391 4.85001L2.20373 2.22001C3.42843 0.990014 5.41017 0.990014 6.63487 2.22001L7.79379 3.38001L14.2038 -3.0e-5C14.2741 -0.0696 14.3697 -0.1091 14.4693 -0.1091C14.5689 -0.1091 14.6644 -0.0696 14.7348 -3.0e-5L16.8288 2.10001C16.8992 2.17055 16.9699 2.21018 17 2.21018Z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'><path d='M16.8288 2.55001L14.7348 0.450014C14.6644 0.379483 14.5689 0.339844 14.4693 0.339844C14.3697 0.339844 14.2741 0.379483 14.2038 0.450014L5.3598 9.30001C5.28944 9.37055 5.19392 9.41018 5.0943 9.41018C4.99467 9.41018 4.89915 9.37055 4.82879 9.30001L2.73479 7.20001C2.66444 7.12948 2.56892 7.08984 2.4693 7.08984C2.3696 7.08984 2.27408 7.12948 2.20373 7.20001L0.109727 9.30001C0.0393701 9.37055 -0.0561523 9.41018 -0.155832 9.41018C-0.255512 9.41018 -0.351033 9.37055 -0.421391 9.30001C-1.64609 8.07001 -1.64609 6.08001 -0.421391 4.85001L2.20373 2.22001C3.42843 0.990014 5.41017 0.990014 6.63487 2.22001L7.79379 3.38001L14.2038 -3.0e-5C14.2741 -0.0696 14.3697 -0.1091 14.4693 -0.1091C14.5689 -0.1091 14.6644 -0.0696 14.7348 -3.0e-5L16.8288 2.10001C16.8992 2.17055 16.9699 2.21018 17 2.21018Z'/></svg>") center/contain no-repeat;
}

.btn-price{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  padding:20px;
  border-radius:12px;
  background-color:#fff;
  color:#000;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  letter-spacing:.3px;
  transition:background-image .34s, color .34s;
}
.btn-price:hover{
  background-image:linear-gradient(96deg,#b16cea,#ff5e69 50%,#ffa848);
  color:#fff;
}

.price-footnote{
  margin-top:40px;
  text-align:center;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:300;
  line-height:1.65em;
  color:var(--white);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{padding-top:0;padding-bottom:0;}

.faq-wrap{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-start;
  width:var(--max);
  max-width:1140px;
}

.faq-intro{
  width:35%;
  max-width:383px;
}

/* la FAQ de l'originale utilise le h2 de base (32px), pas le titre de section */
.faq-intro .h2{font-size:32px;line-height:36px;margin:20px 0 10px;}

.faq-intro .body-lg{margin-bottom:32px;}

.faq-bold{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  line-height:150%;
  margin-bottom:32px;
  color:var(--white);
}

.faq-contact{
  display:inline-block;
  padding:10px 0;   /* cible tactile de 44px */
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  line-height:100%;
  background-image:linear-gradient(to right,#b16cea 20%,#ff5e69 60%,#ff8a56 80%,#ffa84b);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
.faq-contact:hover{background-image:linear-gradient(to left,#b16cea 20%,#ff5e69 60%,#ff8a56 80%,#ffa84b);}

.faq-list{width:60%;}

.faq-item{border-bottom:1px solid rgba(255,255,255,.14);}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,.14);}

.faq-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  cursor:pointer;
  list-style:none;
  padding:20px 0;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  line-height:34px;
  color:var(--white);
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{
  content:"";
  flex:none;
  width:32px;height:32px;
  background-image:linear-gradient(90deg,#b16cea,#ffa84b);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 6.666V25.333M6.667 16h18.666' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 6.666V25.333M6.667 16h18.666' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transition:transform .25s ease;
}
.faq-item[open] .faq-q::after{transform:rotate(45deg);}

.faq-a{padding:0 10% 24px 0;}
.faq-a .body-lg{margin-bottom:16px;}
.faq-a .body-lg:last-child{margin-bottom:0;}

/* ============================================================
   TÉMOIGNAGE
   ============================================================ */
.testimonial{
  display:grid;
  /* Même correctif que la vedette : la photo carrée ne doit pas fixer la
     hauteur de la carte. Le témoignage est court, donc la colonne image est
     plus étroite encore que celle de la vedette. */
  grid-template-columns:minmax(0,0.78fr) minmax(0,1fr);
  align-items:stretch;
  width:var(--max);
  margin-top:16px;
  background-color:var(--pureblack);
  border-radius:var(--radius-card);
  overflow:hidden;
}

.testimonial-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

.testimonial-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,3.2vw,52px) clamp(24px,4.5vw,72px) clamp(28px,3.2vw,52px) clamp(24px,2.6vw,40px);
}

.testimonial-rule{
  width:63px;height:1px;
  background-color:var(--dark-orange);
  margin-bottom:24px;
}

.testimonial-body .body-lg{margin-bottom:24px;}

.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  line-height:1.6em;
  color:var(--muted);
}
.testimonial-author img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section{padding-top:7rem;}

.contact-section .body-lg{margin-bottom:48px;}

.contact-form fieldset{
  border:0;
  margin:0 0 60px;
  padding:0;
}

.field-label,
.contact-form legend{
  display:block;
  padding:0;
  margin-bottom:24px;
  color:var(--dark-orange);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:156%;
  letter-spacing:3.84px;
  text-transform:uppercase;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.chip{
  position:relative;
  display:flex;
  align-items:center;
  padding:18px 32px;
  background-color:var(--white);
  color:var(--black-2);
  border:1px solid rgba(0,0,0,.1);
  border-radius:80px;
  cursor:pointer;
  transition:background-color .2s, color .2s, box-shadow .2s;
}

.chip input{
  position:absolute;
  opacity:0;
  width:100%;height:100%;
  left:0;top:0;
  margin:0;
  cursor:pointer;
}

.chip span{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  line-height:156%;
  letter-spacing:-.32px;
}

.chip:hover{background-color:var(--dark-orange);color:#fff;}

.chip:has(input:checked){
  background-color:var(--dark-orange);
  color:#fff;
  box-shadow:0 0 0 2px #ff8600, 0 0 0 5px rgba(255,134,0,.25);
}

.chip:has(input:focus-visible){
  outline:2px solid var(--dark-orange);
  outline-offset:3px;
}

/* champs */
.field-row{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;}
.field-row .field{flex:1;}

.field-fieldset{width:100%;margin-bottom:32px;}
.field{display:flex;flex-direction:column;width:100%;margin-bottom:32px;}
.field-row .field{margin-bottom:32px;}

.field label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.field input,
.field textarea{
  width:100%;
  height:70px;
  padding:21px 30px;
  border:1px solid rgba(13,14,16,.1);
  border-radius:78px;
  background-color:#fff;
  color:#0d0e10;
  font-family:var(--font-display);
  font-size:18px;
  line-height:156%;
  letter-spacing:-.16px;
}

.field textarea{
  height:160px;
  border-radius:24px;
  resize:vertical;
  padding-top:24px;
}

.field input::placeholder,
.field textarea::placeholder{color:rgba(13,14,16,.6);}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(255,134,0,.9);
  box-shadow:0 0 0 3px rgba(255,134,0,.25);
}

.field-error{
  display:none;
  margin:8px 0 0 30px;
  color:#ff8a80;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
}
.field.invalid .field-error{display:block;}
.field.invalid input,
.field.invalid textarea{border-color:#ff8a80;box-shadow:0 0 0 3px rgba(255,138,128,.2);}

.btn-submit{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:200px;
  max-width:210px;
  height:60px;
  padding:0 20px;
  border:0;
  text-align:center;
  cursor:pointer;
  /* le dégradé est trop clair pour du blanc : on pose le texte en noir
     profond, qui tient 4.5:1 sur CHAQUE arrêt du dégradé (mesuré 4.6:1
     au pire, sur le #ffa84b). Le voile assombrit le fond juste ce qu'il
     faut pour rester lisible sans trahir la charte. */
}
.btn-submit .btn-label{
  color:#1c1a1f;
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}

/* même correction pour tous les boutons du dégradé clair */
.btn-gradient{transition:background-image .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);}
.btn-gradient:active{transform:scale(.98);}

.form-success{
  margin-top:24px;
  padding:18px 40px;
  border-radius:100px;
  background-color:#b16cea;
  color:#fff;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
}

/* Message d'échec d'envoi : même forme que le succès, en rouge lisible
   sur le fond sombre. */
.form-error{
  margin-top:24px;
  padding:18px 40px;
  border-radius:100px;
  border:1px solid rgba(255,138,128,.55);
  background-color:rgba(255,138,128,.12);
  color:#ff8a80;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
}

/* Leurre anti-pourriel : retiré de la vue sans être display:none, pour que
   les robots qui ignorent les styles continuent de le remplir. */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Bouton pendant l'envoi */
.btn-submit:disabled{
  cursor:progress;
  opacity:.75;
}
.btn-submit.is-busy{
  background-image:linear-gradient(90deg,#ffa84b,#b16cea);
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-bottom:7rem;
  padding:24px 0;
  color:var(--muted);
}

.footer-inner{width:var(--max);}

.footer-line{
  width:100%;height:1px;
  background-color:#3e4545;
  margin-top:36px;
  margin-bottom:10px;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}

.footer-brand{display:inline-block;padding:12px 0;}
/* mot-symbole en vrai texte : Montserrat 700, comme le reste de la marque.
   L'ancienne image SVG embarquait un raster de 901px clippé par le texte,
   ce qui rendait le mot flou au lieu de gras. */
.footer-brand-text{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:23px;
  line-height:1.1;
  letter-spacing:.005em;
  opacity:.95;
  transition:opacity .25s;
}
.footer-brand:hover .footer-brand-text{opacity:1;}

.footer-legal{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-family:var(--font-display);
  font-size:15px;
}

.footer-legal a{display:inline-block;padding:11px 0;color:#939b9b;transition:color .25s;}
.footer-legal a:hover{color:var(--sandy-brown);}

.footer-copy{color:#9aa3a3;font-size:15px;}   /* 6.2:1 sur le fond */
/* La marque dans la ligne de copyright reste du TEXTE COURANT : même graisse
   et même couleur que la phrase, à la demande du commandant. Le mot-symbole
   gras plus haut (.footer-brand-text) est la seule marque appuyée. */
.footer-copy-brand{font-weight:400;color:inherit;font-size:inherit;}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- ordinateur portable étroit : le héros sur deux colonnes exige
   923 + 16 + 260 px, plus 10vw de marge gauche → il faut 1332 px de large.
   En dessous, on empile plutôt que de rogner le titre ou le cercle. --- */
@media screen and (max-width:1359px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    width:var(--max);
    justify-content:stretch;
    row-gap:8px;
  }
  .hero-title{grid-column:1;grid-row:2;font-size:4.4em;margin-top:16px;}
  .hero-label{grid-column:1;grid-row:1;margin-bottom:8px;}
  .demo-circle{grid-column:1;grid-row:3;justify-self:start;margin-top:36px;}
}

/* --- la carte vedette ne tient sur deux colonnes qu'au-delà de 1360 px.
   Mesuré (tools/tune-ratio.py) : en dessous, l'affiche carrée est forcément
   plus courte ou plus haute que la colonne de texte, ce qui laisse des bandes
   noires en haut et en bas — exactement le vide à supprimer. On empile. --- */
@media screen and (max-width:1359px){
  .featured{grid-template-columns:minmax(0,1fr);width:var(--max);}
  .featured-media{position:static;}
  .featured-img{position:static;width:100%;height:auto;object-fit:cover;}
}

/* --- tablette large --- */
@media screen and (max-width:991px){
  .hero{padding-top:60px;padding-bottom:60px;}
  .hero-grid{grid-template-columns:minmax(0,1fr);width:90vw;justify-content:stretch;}
  .hero-title{grid-column:1;grid-row:2;font-size:4em;}
  .hero-label{grid-column:1;grid-row:1;margin-bottom:8px;}
  .demo-circle{grid-column:1;grid-row:3;justify-self:start;margin-top:32px;}
  /* Ici le repos vaut déjà .1em : un survol à .1em ne bougeait donc PAS du
     tout. On garde l'écart relatif du desktop (.1em -> .3em) en plus serré. */
  .demo-circle:hover{letter-spacing:.2em;}

  .section{padding-top:60px;padding-bottom:60px;}
  .wrap-80{width:90vw;}
  .h2{font-size:40px;margin-bottom:12px;}

  .three-cards{grid-template-columns:1fr;gap:24px;}
  .card{min-height:auto;}

  .carousel-slide{flex-basis:clamp(240px,42vw,380px);}

  .featured{grid-template-columns:1fr;width:90vw;}
  .featured-body{padding:32px 24px;}

  /* Empilé : la photo reprend sa hauteur naturelle — le fill absolu n'a plus
     de case à remplir et disparaissait. On ne force aucun cadrage ici : le
     visuel vedette est une affiche entière, la recadrer couperait le logo. */
  .featured-media,
  .testimonial-media{
    position:static;
  }
  .featured-img,
  .testimonial-img{
    position:static;
    width:100%;
    height:auto;
  }

  .pricing-title{font-size:50px;margin-bottom:20px;}
  .price-grid{flex-direction:column;align-items:center;}
  .price-box{width:80vw;min-height:auto;margin:0 0 40px;padding:32px;}
  .price-top{align-items:center;text-align:center;}
  .price-amount{margin-bottom:25px;}
  .price-list{align-items:flex-start;}
  .btn-price{margin-top:40px;}

  .faq-wrap{flex-direction:column;width:90vw;}
  .faq-intro{width:100%;max-width:420px;margin-bottom:60px;}
  .faq-list{width:100%;}
  .faq-a{padding-right:7%;}

  .testimonial{grid-template-columns:1fr;width:90vw;}
  .testimonial-body{padding:32px 24px;}

  .contact-section{padding-top:60px;}
  .field-label{font-size:17px;}
  .chip{padding:16px 24px;}
  .chip span{font-size:16px;}

  /* menu mobile */
  .nav-burger{display:flex;}
  .nav-menu{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 15px 24px;
    background-color:#0f1213;
    border-radius:16px;
    display:none;
  }
  .nav-menu.open{display:flex;}
  .nav-links{flex-direction:column;align-items:stretch;width:100%;}
  .nav-link{
    padding:32px 0;
    border-top:1px solid #3e4545;
    color:var(--muted);
    text-shadow:none;
    font-size:1.1em;
  }
  .nav-link:hover,.nav-link.w--current{color:var(--muted);}
  .nav-link:last-child{border-bottom:1px solid #3e4545;}
  .nav-menu .btn-gradient{margin-top:24px;text-align:center;}
}

/* --- téléphone --- */
@media screen and (max-width:767px){
  .hero{padding-top:32px;padding-bottom:32px;}
  .hero-grid{grid-template-columns:minmax(0,1fr);width:90vw;justify-content:stretch;row-gap:8px;}
  .hero-title{grid-column:1;grid-row:2;font-size:2.1em;margin:16px 0 0;}
  .hero-label{grid-column:1;grid-row:1;margin-bottom:0;font-size:13px;letter-spacing:.12em;}
  /* le cercle garde sa géométrie et son animation, en plus petit */
  .demo-circle{
    grid-column:1;grid-row:3;justify-self:start;
    width:190px;height:168px;
    margin-top:28px;
    font-size:13px;letter-spacing:.08em;
  }
  .demo-circle:hover{letter-spacing:.18em;}
  /* assez large pour « ESTIMATION » espacé à .18em, sinon débordement */
  .demo-circle-text{width:126px;padding:0;}

  .section{padding-top:32px;padding-bottom:32px;}
  .h2{font-size:34px;}
  .body-lg{font-size:17px;}

  .band-item{font-size:1.4em;padding:0 12px;}
  .band-dot{width:8px;height:8px;}

  .card{padding:28px;}
  .card-top{margin-right:-28px;}
  .card-text h3{font-size:1.5em;}

  /* une vignette à la fois, presque pleine largeur, comme sur une appli */
  .carousel-track{padding:0 20px;--slide-gap:14px;}
  .carousel-track::after{flex-basis:6px;}
  .carousel-slide{flex-basis:calc(100vw - 64px);}
  .carousel-bar{margin-top:18px;gap:16px;}
  .carousel-btn{width:44px;height:44px;}
  .carousel-dot[aria-selected="true"]{--pill:24px;}

  .featured{width:90vw;}
  .featured-body{padding:24px 20px;}
  .featured-body h3{font-size:28px;}

  .pricing-title{font-size:42px;}
  .price-box{width:90vw;padding:24px 20px;}
  .price-plan{font-size:32px;}
  .price-amount{font-size:38px;}
  .price-list li{font-size:16px;}
  .price-list li::before{width:15px;height:13px;}

  .toggle-label{font-size:16px;}
  .toggle{margin:0 16px;}

  .faq-intro{margin-bottom:40px;}
  .faq-q{font-size:19px;line-height:1.4;}
  .faq-a{padding-right:0;}

  .testimonial-body{padding:24px 20px;}

  .contact-section{padding-top:32px;}
  .field-label{font-size:16px;letter-spacing:2.5px;}
  .chips{gap:10px;}
  .chip{padding:14px 18px;}
  .chip span{font-size:14px;}
  .field-row{flex-direction:column;gap:0;}
  .field-row .field{margin-bottom:32px;}
  .field input,.field textarea{height:60px;padding-left:20px;font-size:16px;}
  .field textarea{height:150px;}
  .btn-submit{width:100%;max-width:90vw;}

  .footer{margin-bottom:40px;}
  .footer-row{flex-direction:column;align-items:flex-start;}
  .footer-legal{justify-content:flex-start;gap:16px;}
}

/* --- petit téléphone --- */
@media screen and (max-width:479px){
  .hero-title{font-size:1.9em;}
  .hero-label{font-size:12px;letter-spacing:.1em;}

  .h2{font-size:30px;}
  .body-lg{font-size:16px;}

  .pricing-title{font-size:34px;}
  .pricing-kicker{font-size:16px;}
  .price-box{width:100%;padding:24px 18px;}
  .price-amount{font-size:32px;}
  .price-suffix{font-size:14px;}

  .faq-q{font-size:18px;line-height:140%;}
  .faq-q::after{width:24px;height:24px;}

  .footer-legal{flex-direction:column;align-items:flex-start;gap:12px;}
  .footer-brand-text{font-size:22px;}
}