/* =========================================================================
   POTENTIEEL — la page Google Ads

   Un seul fond du haut en bas, et le tableau de bord Google Ads en guise de
   démarcation sous le header : l'interface que le client reçoit, reprise
   fidèlement. La séparation ne vient plus d'un changement de teinte, elle
   vient de l'objet.

   À charger APRÈS theme-ink.css.
   ========================================================================= */

/* ---------- un seul fond ------------------------------------------------- */

html, body { background: var(--bg-card); }
/* le pied reprend le même fond : plus aucune variation sur la page */
.footer { background: var(--bg-card); }

/* Les cartes gardent le ton sombre : c'est elles qui portent la structure
   maintenant que les sections ne changent plus de fond. */

/* ---------- le header ----------------------------------------------------
   Deux colonnes bord à bord, alignées sur la barre de navigation. À gauche
   ce qu'on promet, à droite ce que l'artisan reçoit : son téléphone qui
   sonne, et les demandes déjà arrivées. Pas de capture de tableau de bord —
   ça montrerait notre travail, pas son résultat à lui.
   -------------------------------------------------------------------------- */

.ga-hero { padding: clamp(84px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
.ga-wrap {
  /* 26 px : le retrait du logo dans la barre de navigation, pour que le
     titre commence exactement sous lui. */
  max-width: 1180px; margin: 0 auto; padding: 0 26px;
}
.ga-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(32px, 4.4vw, 72px); align-items: center;
}

/* le logo, en pastille : un objet posé, pas une ligne de texte */
.ga-marque {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 clamp(18px, 1.8vw, 22px);
  padding: 6px 15px 6px 10px; border-radius: 999px;
  background: rgba(233, 239, 242, .05);
  border: 1px solid rgba(233, 239, 242, .16);
}
.ga-marque svg { width: 20px; height: 20px; display: block; }
.ga-marque span {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 500; color: var(--white);
  letter-spacing: .005em;
}

.ga-titre {
  font-size: clamp(29px, 3.5vw, 46px);
  font-weight: 700; line-height: 1.09; letter-spacing: -0.025em;
  margin: 0 0 clamp(18px, 2vw, 24px);
  max-width: 17ch;
}
.ga-lede {
  font-size: clamp(15.5px, 1.4vw, 17px);
  color: var(--gray-light); line-height: 1.72;
  max-width: 52ch; margin: 0 0 clamp(24px, 2.6vw, 32px);
}
.ga-actions { display: grid; justify-items: start; gap: 13px; }
.ga-boutons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ga-offre { font-size: 13px; color: var(--gray); line-height: 1.5; margin: 0; }
.ga-offre b { color: var(--gray-light); font-weight: 600; }

/* le numéro : une vraie action, pas un lien discret */
.ga-tel {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: .005em;
  color: var(--white); text-decoration: none; white-space: nowrap;
  background: rgba(233, 239, 242, .06);
  border: 1px solid rgba(233, 239, 242, .3);
  transition: background .25s ease, border-color .25s ease;
}
.ga-tel:hover { background: rgba(233, 239, 242, .14); border-color: rgba(233, 239, 242, .5); }
.ga-tel:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ga-tel svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- la scène : le téléphone et les demandes ---------------------- */

/* Empilées, pas superposées : posées sur le téléphone, les fiches en
   cachaient le numéro et les boutons. */
.ga-scene {
  position: relative; justify-self: end; width: 100%; max-width: 400px;
  display: grid; gap: 14px; justify-items: center;
}
.ga-tel-ecran { position: relative; width: 248px; }

/* L'onde du téléphone qui sonne : la seule chose qui bouge en continu dans
   ce header, et elle a une raison d'être. */
.ga-onde {
  position: absolute; left: 50%; top: 50%;
  width: 248px; height: 248px; margin: -124px 0 0 -124px;
  border-radius: 50%; border: 1px solid rgba(138, 180, 248, .5);
  opacity: 0; pointer-events: none;
}
.ga-scene.is-in .ga-onde { animation: gaOnde 3.4s cubic-bezier(.2,.7,.3,1) 1.1s infinite; }
@keyframes gaOnde {
  0%   { transform: scale(.52); opacity: 0; }
  18%  { opacity: .5; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ga-ecran {
  position: relative; z-index: 1;
  background: linear-gradient(170deg, #1B3242 0%, #102029 100%);
  border: 1px solid rgba(233, 239, 242, .22);
  border-radius: 26px; padding: 26px 22px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 60px -22px rgba(0,0,0,.85);
  text-align: center;
}
.ga-ecran-haut {
  font-size: 12.5px; color: var(--gray-light);
  letter-spacing: .02em; margin: 0 0 8px;
}
.ga-ecran-num {
  font-size: 23px; font-weight: 600; color: var(--white);
  letter-spacing: -.01em; margin: 0 0 10px;
}
.ga-ecran-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #8AB4F8; margin: 0 0 24px;
}
.ga-ecran-src svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.ga-ecran-bas { display: flex; justify-content: center; gap: 44px; }
.ga-rond {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
}
.ga-rond svg { width: 22px; height: 22px; fill: currentColor; }
.ga-rond-r { background: #D93025; color: #fff; transform: rotate(134deg); }
.ga-rond-v { background: #1E8E3E; color: #fff; }

/* les demandes déjà arrivées, posées autour du téléphone */
.ga-fiche {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(21, 42, 54, .95);
  border: 1px solid rgba(233, 239, 242, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .8);
  white-space: nowrap;
}
.ga-fiche-1 { justify-self: start; }
.ga-fiche-2 { justify-self: end; }
.ga-fiche b { display: block; font-size: 13px; font-weight: 600; color: var(--white); }
.ga-fiche i { display: block; font-style: normal; font-size: 11.5px; color: var(--gray-light); margin-top: 2px; }
.ga-fiche u { text-decoration: none; font-size: 11px; color: var(--gray); margin-left: 4px; }
.ga-pastille {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
}
.ga-pastille svg { width: 15px; height: 15px; }
.ga-pastille-b { background: rgba(138, 180, 248, .18); color: #8AB4F8; }
.ga-pastille-b svg { fill: currentColor; }
.ga-pastille-v { background: rgba(52, 168, 83, .2); color: #6DD58C; }
.ga-pastille-v svg {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* la scène s'assemble une fois, à l'arrivée */
.ga-scene.anim .ga-ecran { opacity: 0; transform: translateY(18px); }
.ga-scene.anim .ga-fiche { opacity: 0; transform: translateY(10px); }
.ga-scene.anim.is-in .ga-ecran {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.ga-scene.anim.is-in .ga-fiche-1 {
  opacity: 1; transform: none;
  transition: opacity .5s ease .45s, transform .6s cubic-bezier(.2,.8,.2,1) .45s;
}
.ga-scene.anim.is-in .ga-fiche-2 {
  opacity: 1; transform: none;
  transition: opacity .5s ease .7s, transform .6s cubic-bezier(.2,.8,.2,1) .7s;
}

@media (max-width: 1000px) {
  .ga-grille { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .ga-scene { justify-self: center; }
  .ga-titre { max-width: 22ch; }
  .ga-lede { max-width: 62ch; }
}
@media (max-width: 560px) {
  .ga-wrap { padding: 0 20px; }
  .ga-actions { justify-items: stretch; }
  .ga-boutons { width: 100%; }
  .ga-boutons .btn-primary, .ga-tel { flex: 1 1 auto; justify-content: center; text-align: center; }
  .ga-fiche { padding: 9px 12px; white-space: normal; }
  .ga-fiche-1, .ga-fiche-2 { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .ga-scene .ga-onde { animation: none !important; opacity: 0 !important; }
  .ga-scene .ga-ecran, .ga-scene .ga-fiche { opacity: 1 !important; transform: none !important; }
}

/* ---------- le compte Google Ads ----------------------------------------
   Le compte tel qu'il se présente : quatre métriques, les quatre courbes du
   mois, puis le détail campagne par campagne — une prestation par ligne,
   comme on les monte. Les trois lignes du tableau font les totaux affichés
   au-dessus : rien n'est posé à côté, tout s'additionne.
   -------------------------------------------------------------------------- */

.gads-zone {
  max-width: 1180px; margin: clamp(34px, 4vw, 54px) auto 0;
  padding: 0 26px;
}

.gads {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 24px 60px -24px rgba(0, 0, 0, .7);
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- les quatre métriques ---- */
.gads-tuiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 44px;
  align-items: stretch;
  border-bottom: 1px solid #E8EAED;
}
.gads-tuile {
  padding: 11px 18px 13px; min-width: 0;
  border-right: 1px solid #E8EAED;
}
.gads-tuile:nth-child(4) { border-right: 0; }
.gads-nom {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: #5F6368; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gads-nom svg {
  width: 9px; height: 6px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
}
.gads-tuile b {
  display: block; font-size: clamp(19px, 2vw, 25px);
  font-weight: 400; color: #202124; letter-spacing: -.005em; line-height: 1.1;
}
/* Les quatre métriques sélectionnées portent chacune la couleur de sa courbe.
   Teintes choisies pour que le blanc passe le seuil de lisibilité dessus :
   le jaune et le vert de Google sont trop clairs tels quels. */
.gads-b { background: #1A73E8; border-right-color: #1A73E8; }
.gads-r { background: #D93025; border-right-color: #D93025; }
.gads-j { background: #A36200; border-right-color: #A36200; }
.gads-v { background: #137333; border-right-color: #137333; }
.gads-b .gads-nom, .gads-r .gads-nom,
.gads-j .gads-nom, .gads-v .gads-nom { color: rgba(255, 255, 255, .94); }
.gads-b b, .gads-r b, .gads-j b, .gads-v b { color: #fff; }

.gads-points { display: grid; place-content: center; gap: 3px; justify-items: center; }
.gads-points i { width: 3px; height: 3px; border-radius: 50%; background: #5F6368; }

/* ---- les quatre courbes ---- */
.gads-graphe { padding: 14px 20px 0; }
.gads-plot { position: relative; height: clamp(108px, 10vw, 148px); }
.gads-plot svg { display: block; width: 100%; height: 100%; }
.gads-grille line { stroke: #E8EAED; stroke-width: 1; }
.gads-trait { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gads-t-b { stroke: #4285F4; }
.gads-t-r { stroke: #EA4335; }
.gads-t-j { stroke: #F9AB00; }
.gads-t-v { stroke: #34A853; }

.gads-dates {
  display: flex; justify-content: space-between;
  padding: 4px 20px 14px;
  font-size: 11.5px; color: #5F6368;
  border-bottom: 1px solid #E8EAED;
}

/* ---- le détail par campagne ---- */
.gads-tableau { padding: 14px 4px 8px; }
.gads-tableau-t {
  font-size: 13px; color: #5F6368; margin: 0 0 6px; padding: 0 16px;
}
.gads-tableau table { width: 100%; border-collapse: collapse; }
.gads-tableau th, .gads-tableau td {
  padding: 10px 16px; text-align: left; white-space: nowrap;
  font-size: 13px; line-height: 1.3;
}
.gads-tableau th {
  color: #5F6368; font-weight: 500;
  border-bottom: 1px solid #E8EAED;
}
.gads-tableau td { color: #202124; border-bottom: 1px solid #F1F3F4; }
.gads-tableau tr:last-child td { border-bottom: 0; }
.gads-tableau td:first-child { color: #1A73E8; }
.gads-n { text-align: right !important; font-variant-numeric: tabular-nums; }
.gads-pt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #1E8E3E; margin-right: 9px; vertical-align: 1px;
}
.gads-etat {
  display: inline-block; padding: 2px 9px 3px; border-radius: 999px;
  background: #E6F4EA; color: #137333; font-size: 11.5px;
}

.gads-note {
  margin: 16px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--gray); max-width: 78ch;
}

/* ---- le tracé se dessine une fois, à l'arrivée à l'écran ---- */
.gads-zone.anim .gads-trait { stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.gads-zone.anim.is-in .gads-t-r { transition: stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1) .05s; stroke-dashoffset: 0; }
.gads-zone.anim.is-in .gads-t-b { transition: stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1) .2s;  stroke-dashoffset: 0; }
.gads-zone.anim.is-in .gads-t-j { transition: stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1) .35s; stroke-dashoffset: 0; }
.gads-zone.anim.is-in .gads-t-v { transition: stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1) .5s;  stroke-dashoffset: 0; }
.gads-zone.anim .gads-tuile b { opacity: 0; }
.gads-zone.anim.is-in .gads-tuile b {
  opacity: 1; transition: opacity .5s ease calc(.15s + var(--i, 0) * .09s);
}

@media (max-width: 900px) {
  .gads-zone { padding-left: 20px; padding-right: 20px; }
  .gads-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gads-points { display: none; }
  .gads-tuile:nth-child(2) { border-right: 0; }
  .gads-tuile:nth-child(1), .gads-tuile:nth-child(2) { border-bottom: 1px solid #E8EAED; }
  .gads-graphe { padding: 12px 12px 0; }
  .gads-dates { padding: 4px 12px 12px; }
  /* le tableau se parcourt latéralement plutôt que de se tasser */
  .gads-tableau { overflow-x: auto; }
  .gads-tableau table { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  .gads-zone .gads-trait { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .gads-zone .gads-tuile b { opacity: 1 !important; }
}

/* ---------- les trois cas de figure --------------------------------------
   Des lignes, pas des cartes : l'artisan doit reconnaître la sienne d'un
   coup d'œil, pas comparer trois blocs. Chaque ligne porte son numéro et un
   rail de couleur, du jaune au rouge — l'ordre suit celui de la gravité.
   Teintes mesurées entre 6 et 8,6:1 sur le fond.
   -------------------------------------------------------------------------- */

.cas { display: grid; gap: 0; }
.cas-l {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px); align-items: start;
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--border-card);
  position: relative;
}
.cas-l:last-child { border-bottom: 1px solid var(--border-card); }
/* le rail : il marque la ligne sans l'enfermer dans une boîte */
.cas-l::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px;
  width: 2px; background: var(--ton);
}
.cas-l { padding-left: clamp(18px, 2.2vw, 26px); }
.cas-j { --ton: #F2C14E; --voile: rgba(242, 193, 78, .14); }
.cas-o { --ton: #F6A463; --voile: rgba(246, 164, 99, .14); }
.cas-r { --ton: #F28B82; --voile: rgba(242, 139, 130, .14); }

.cas-n {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: var(--ton);
  background: var(--voile);
}
.cas-t h3 {
  font-size: clamp(17px, 1.7vw, 19px); font-weight: 700;
  color: var(--white); margin: 9px 0 9px;
}
.cas-t p {
  font-size: 15px; color: var(--gray-light); line-height: 1.72;
  margin: 0; max-width: 78ch;
}

@media (max-width: 560px) {
  .cas-l { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .cas-n { width: 38px; height: 38px; font-size: 15px; }
  .cas-t h3 { margin-top: 5px; }
}

/* ---------- ce que comprend la mise en place ---------------------------- */

.inclus { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.inclus-c {
  border: 1px solid var(--border-card); border-radius: 14px;
  background: var(--bg); padding: 22px 24px 10px;
}
/* en bas de casse : les capitales traquées sont le tic de mise en page que
   la charte proscrit, et l'intitulé se lit mieux ainsi. */
.inclus-c h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: var(--orange);
  margin: 0 0 12px;
}
.inclus-c h3 svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.inclus-c ul { list-style: none; margin: 0; padding: 0; }
.inclus-c li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px;
  align-items: start;
  padding: 12px 0; border-top: 1px solid var(--border-card);
  font-size: 14.5px; color: var(--gray-light); line-height: 1.6;
}
.inclus-c li:first-of-type { border-top: 0; }
.inclus-c li::before {
  content: ''; width: 18px; height: 18px; margin-top: 2px;
  background: var(--orange);
  -webkit-mask: var(--coche) center / 13px no-repeat;
  mask: var(--coche) center / 13px no-repeat;
}
.inclus {
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
}
.inclus-note {
  font-size: 14px; color: var(--gray); line-height: 1.65;
  margin: 24px 0 0; max-width: 76ch;
}

/* ---------- le budget publicitaire -------------------------------------- */

.budget {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
  border: 1px solid var(--border-card); border-radius: 16px;
  background: var(--bg); padding: clamp(26px, 3vw, 36px);
}
.budget-chiffre { text-align: left; }
.budget-chiffre span {
  display: block; font-size: 14px; color: var(--gray); margin-bottom: 10px;
}
.budget-chiffre b {
  display: block; font-family: 'Spectral', Georgia, serif;
  font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1.05;
  color: var(--orange); letter-spacing: -.02em;
}
.budget-chiffre i {
  display: block; font-style: normal; font-size: 14px;
  color: var(--gray-light); margin-top: 10px; line-height: 1.6;
}
.budget-points { display: grid; gap: 16px; }
.budget-p { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.budget-p span {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(210, 165, 76, .14); color: var(--orange);
}
.budget-p span svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.budget-p b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.budget-p p { font-size: 14.5px; color: var(--gray-light); line-height: 1.65; margin: 0; }

/* ---------- pour qui c'est fait ----------------------------------------- */

.pourqui { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.pourqui-c {
  border: 1px solid var(--bord); border-radius: 14px;
  background: var(--bg); padding: 22px 24px 12px;
  position: relative; overflow: hidden;
}
.pourqui-c::after {
  content: ''; position: absolute; right: -70px; top: -80px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--voile), transparent 68%);
  pointer-events: none;
}
.pourqui-c > * { position: relative; z-index: 1; }
.pourqui-oui { --ton: #6DD58C; --voile: rgba(109, 213, 140, .14); --bord: rgba(109, 213, 140, .34); }
.pourqui-non { --ton: #F28B82; --voile: rgba(242, 139, 130, .14); --bord: rgba(242, 139, 130, .34); }
.pourqui-c h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; color: var(--ton); margin: 0 0 14px;
}
.pourqui-c h3 span {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--voile);
}
.pourqui-c h3 svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.pourqui-c ul { list-style: none; margin: 0; padding: 0; }
.pourqui-c li {
  padding: 11px 0 11px 20px; position: relative;
  border-top: 1px solid var(--border-card);
  font-size: 14.5px; color: var(--gray-light); line-height: 1.6;
}
.pourqui-c li:first-child { border-top: 0; }
.pourqui-c li::before {
  content: ''; position: absolute; left: 0; top: 19px;
  width: 9px; height: 1.5px; background: var(--ton);
}
.pourqui-note {
  font-size: 14px; color: var(--gray); line-height: 1.65;
  margin: 24px 0 0; max-width: 76ch;
}

@media (max-width: 760px) {
  .budget { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* =========================================================================
   LA ZONE GOOGLE — de « pourquoi vous n'avez pas plus de chantiers »
   jusqu'à « pour qui c'est fait »

   On reprend la direction de la zone Google de l'accueil : fond clair,
   surfaces blanches, palette Google, Roboto. Notre laiton revient par
   touches — mais en #8A6A1F, parce que le #D2A54C de l'encre tombe sous
   les seuils de lisibilité sur ce fond (mesuré) ; même teinte, 4,79:1.

   La zone occupe toute la largeur utile, et chaque bloc va d'un bord à
   l'autre au lieu de tenir dans une colonne centrale étroite.
   ========================================================================= */

.gz {
  position: relative;
  background: #F8F9FA;
  color: #202124;
  font-family: 'Roboto', system-ui, Arial, sans-serif;
  --or: #8A6A1F;          /* notre laiton, version fond clair */
  --trait: #DADCE0;
  --trait-clair: #E8EAED;
  --second: #5F6368;
}
/* Le passage de l'encre au clair se fait franchement : entre deux valeurs
   aussi éloignées, un dégradé ne se lit pas comme une transition mais comme
   une bande grise sale. Même choix que sur l'accueil. */

.gz .container { max-width: 1180px; }
/* titres en Roboto comme la zone de l'accueil : c'est la police de Google,
   et c'est elle qui fait que la section se lit comme une page Google. */
.gz h1, .gz h2, .gz h3 { font-family: 'Roboto', system-ui, Arial, sans-serif; }
.gz h2 { color: #202124; letter-spacing: -0.015em; font-weight: 500; }
.gz h3 { color: #202124; font-weight: 500; }
.gz p  { color: var(--second); }
.gz strong, .gz b { color: #202124; }
.gz a { color: #1568D6; }

/* l'intertitre de section */
.gz .gz-sur {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--or);
  margin: 0 0 14px;
}
.gz .gz-sur::before {
  content: ''; width: 26px; height: 2px; background: var(--or); flex: none;
}

/* ---------- les trois cas de figure ------------------------------------- */

.gz .cas-l {
  border-top: 1px solid var(--trait);
  padding-left: clamp(18px, 2.2vw, 26px);
  transition: background .25s ease;
}
.gz .cas-l:last-child { border-bottom: 1px solid var(--trait); }
.gz .cas-l:hover { background: #fff; }
.gz .cas-l::before { width: 3px; }
/* Deux teintes par cas : la vive pour le rail, qui n'est que du dessin, et
   une foncée pour le chiffre, qui doit se lire sur sa pastille. Le jaune de
   Google sur son fond pâle tombe à 1,8:1 ; sa version foncée tient 5,9:1. */
.gz .cas-j { --ton: #F9AB00; --voile: #FEF7E0; --chiffre: #8A5300; }
.gz .cas-o { --ton: #E8710A; --voile: #FEEFE3; --chiffre: #A8500A; }
.gz .cas-r { --ton: #D93025; --voile: #FCE8E6; --chiffre: #C5221F; }
.gz .cas-n { background: var(--voile); color: var(--chiffre); }
.gz .cas-t h3 { color: #202124; font-size: clamp(17px, 1.7vw, 20px); }
.gz .cas-t p { color: var(--second); max-width: 92ch; }

/* ---------- ce qu'on fait : la pièce maîtresse --------------------------

   C'est la section qui explique le métier, donc elle prend la place qui va
   avec. Un préambule dit d'où vient la méthode — le particulier tape une
   prestation et sa ville —, puis quatre rangées pleine largeur la déroulent :
   le propos d'un côté, ce que l'étape produit de l'autre, en alternance.
   Pas de pastilles ici : ce qu'on vend se dit en phrases.
   -------------------------------------------------------------------------- */

.gz-faire { padding: clamp(64px, 7vw, 92px) 0 clamp(56px, 6vw, 84px); }
.gz-faire h2 {
  font-size: clamp(28px, 3.5vw, 40px); font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 clamp(28px, 3.2vw, 42px);
}

/* ---- le préambule : pourquoi cette méthode ----------------------------- */

.gz .pourquoi {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding-bottom: clamp(40px, 4.5vw, 60px);
}
.gz .pourquoi-dit p {
  font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.7;
  margin: 0 0 16px; max-width: 48ch;
}
.gz .pourquoi-dit p:last-child { margin-bottom: 0; }
.gz .pourquoi-dit b { color: #202124; font-weight: 500; }

/* la barre de recherche et ce que Google propose en dessous */
.gz .vu-barre {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--trait); background: #fff;
}
.gz .vu-barre svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round;
}
.gz .vu-barre > span { font-size: 15px; color: #202124; }
.gz .vu-suggest {
  background: #fff; border: 1px solid var(--trait); border-radius: 24px;
  padding: 0 0 10px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(32,33,36,.18);
}
.gz .vu-suggest .vu-barre {
  border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--trait-clair);
  padding: 14px 20px; gap: 14px;
}
.gz .vu-suggest .vu-barre em {
  width: 1px; height: 19px; background: #1A73E8;
  animation: vuCurseur 1.1s step-end infinite;
}
@keyframes vuCurseur { 50% { opacity: 0; } }
.gz .vu-suggest ul { list-style: none; margin: 8px 0 0; padding: 0; }
.gz .vu-suggest li {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px; font-size: 14.5px; color: #202124;
}
.gz .vu-suggest li:hover { background: #F8F9FA; }
.gz .vu-suggest li svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: #9AA0A6; stroke-width: 2; stroke-linecap: round;
}
.gz .vu-suggest li b { font-weight: 400; color: #5F6368; }

@media (prefers-reduced-motion: reduce) {
  .gz .vu-suggest .vu-barre em { animation: none; }
}



/* ---- le pont : Google Ads, ce que c'est -------------------------------
   On nomme la chose et on l'explique avant de la dérouler. La marque est
   le sujet du bloc : elle passe en tête, et ses trois formes montent en
   place quand le bloc arrive à l'écran. C'est le seul mouvement d'ici.
   ------------------------------------------------------------------------ */

.gz .systeme {
  background: linear-gradient(180deg, #E9F0FD 0%, #DFEAFB 100%);
  border: 1px solid #BBD2F5; border-radius: 14px;
  padding: clamp(26px, 3.4vw, 42px) clamp(22px, 3vw, 44px) clamp(24px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(26, 115, 232, .06);
}

.gz .sys-haut {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px); align-items: start;
  padding-bottom: clamp(24px, 2.8vw, 34px);
}
.gz .sys-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: #fff; border: 1px solid #CDDFF8;
}
.gz .sys-ads-mark { width: 30px; height: 30px; }
.gz .sys-haut h3 {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 500;
  line-height: 1.22; letter-spacing: -.012em; margin: 0 0 10px;
}
.gz .sys-dit p {
  font-size: clamp(15px, 1.45vw, 16.5px); line-height: 1.68;
  margin: 0; max-width: 72ch;
}
.gz .sys-dit b { color: #202124; font-weight: 500; }

/* les trois temps, sur un fil */
.gz .sys-chaine {
  list-style: none; margin: 0; padding: clamp(24px, 2.8vw, 32px) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  border-top: 1px solid #C6D9F7;
}
.gz .sys-chaine li { min-width: 0; }
.gz .sys-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: #fff; border: 1px solid #CDDFF8; margin-bottom: 13px;
}
.gz .sys-ic svg {
  width: 19px; height: 19px;
  fill: none; stroke: #1568D6; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.gz .sys-chaine li:nth-child(3) .sys-ic svg { fill: #1568D6; stroke: none; stroke-width: 0; }
.gz .sys-chaine b {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 15.5px; font-weight: 500; color: #202124;
  line-height: 1.3; margin-bottom: 6px;
}
.gz .sys-chaine b i {
  flex: none; font-style: normal; font-size: 12.5px; color: #1568D6;
}
.gz .sys-chaine p { font-size: 13.5px; line-height: 1.55; margin: 0; }

.gz .sys-bas {
  font-size: 14px; line-height: 1.65; margin: 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid #C6D9F7;
  margin-top: clamp(22px, 2.6vw, 30px);
  max-width: 82ch;
}

/* le seul mouvement : les trois formes de la marque montent en place. Tout
   est visible par défaut, le script n'arme l'animation que s'il peut la
   jouer, et un garde-fou pose l'état final si l'observateur ne vient pas. */
.gz .systeme.anim .sys-ads-mark path { opacity: 0; }
.gz .systeme.anim.is-in .sys-ads-mark path {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: adsMonte .6s cubic-bezier(.2, .8, .2, 1) both;
}
.gz .systeme.anim.is-in .sys-ads-mark path:nth-child(2),
.gz .systeme.anim.is-in .sys-ads-mark path:nth-child(4) { animation-delay: .1s; }
.gz .systeme.anim.is-in .sys-ads-mark path:nth-child(3),
.gz .systeme.anim.is-in .sys-ads-mark path:nth-child(5) { animation-delay: .2s; }
@keyframes adsMonte {
  from { opacity: 0; transform: translateY(26%) scale(.88); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gz .systeme .sys-ads-mark path { opacity: 1 !important; animation: none !important; }
}

@media (max-width: 820px) {
  .gz .sys-chaine { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .gz .sys-ic { width: 34px; height: 34px; margin-bottom: 10px; }
}
@media (max-width: 520px) {
  .gz .sys-haut { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---- l'intertitre des étapes ------------------------------------------- */

.gz .faire-sur {
  font-size: 13px; font-weight: 500; color: var(--second);
  padding-top: clamp(22px, 2.4vw, 32px);
  margin: 0 0 clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--trait);
}

/* ---- les quatre étapes -------------------------------------------------- */

.gz .faire { list-style: none; margin: 0; padding: 0; display: grid; }
.gz .faire-t {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(34px, 4vw, 52px) 0;
  border-top: 1px solid var(--trait);
}
.gz .faire-t:first-child { border-top: 0; padding-top: 0; }
/* la section porte déjà son propre bas de page */
.gz .faire-t:last-child { padding-bottom: 0; }
/* une rangée sur deux inverse le propos et l'image ; la dernière suit la
   même alternance, le compte à gauche et le texte à droite */
.gz .faire-t:nth-child(even) .faire-dit { order: 2; }
/* Deux rangées ont un visuel large : l'annonce avec sa page d'arrivée, et le
   compte Google Ads. Leur colonne s'élargit pour que la rangée tienne dans un
   écran — personne ne doit scroller pour voir une étape en entier.
   Les deux sont inversées, donc le visuel occupe la PREMIÈRE colonne de la
   grille : c'est elle qui porte la largeur. */
.gz .faire-t:nth-child(2) { grid-template-columns: minmax(0, 1.36fr) minmax(0, 0.64fr); }
.gz .faire-bilan { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }

.gz .faire-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 15px; font-weight: 500; margin: 0 0 16px;
}
.gz .faire-n1 { background: #E8F0FE; color: #174EA6; }
.gz .faire-n2 { background: #FCE8E6; color: #C5221F; }
.gz .faire-n3 { background: #FEF7E0; color: #8A5300; }
.gz .faire-n4 { background: #E6F4EA; color: #137333; }
.gz .faire-t:nth-child(1) { --ton: #1568D6; }
.gz .faire-t:nth-child(2) { --ton: #C5221F; }
.gz .faire-t:nth-child(3) { --ton: #8A5300; }
.gz .faire-t:nth-child(4) { --ton: #137333; }

.gz .faire-dit h3 {
  font-size: clamp(20px, 2.1vw, 25px); font-weight: 500;
  line-height: 1.25; letter-spacing: -.012em;
  margin: 0 0 12px; max-width: 24ch;
}
.gz .faire-dit > p {
  font-size: clamp(14.5px, 1.35vw, 16px); line-height: 1.68;
  margin: 0; max-width: 48ch;
}

/* la raison d'être, adossée au trait de la rangée */
.gz .faire-pq {
  margin: 18px 0 0 !important;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--ton);
  font-size: 14px !important; line-height: 1.6;
}
.gz .faire-pq b {
  display: block; color: var(--ton);
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  margin-bottom: 4px;
}

/* ---- le visuel : ce que l'étape produit -------------------------------- */

.gz .faire-vu { min-width: 0; }
.gz .vu-leg {
  font-size: 12px; line-height: 1.55; color: var(--second);
  margin: 12px 0 0;
}

.gz .vu-mots, .gz .vu-appels {
  background: #fff; border: 1px solid var(--trait); border-radius: 12px;
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
  box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 1px 3px 1px rgba(60,64,67,.06);
}

/* 1. le relevé de la demande */
.gz .vu-mots-t, .gz .vu-mot {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 86px;
  align-items: center; gap: 10px;
}
.gz .vu-mots-t {
  font-size: 11.5px; font-weight: 500; color: var(--second);
  letter-spacing: .02em; padding-bottom: 10px;
  border-bottom: 1px solid var(--trait);
}
.gz .vu-mots-t span:not(:first-child),
.gz .vu-mot .vu-nb { text-align: right; }
.gz .vu-mot {
  position: relative; padding: 15px 0 14px;
  font-size: 14px; color: #202124;
  border-bottom: 1px solid var(--trait-clair);
}
.gz .vu-mot:last-child { border-bottom: 0; padding-bottom: 2px; }
.gz .vu-mot .vu-nb {
  font-variant-numeric: tabular-nums; color: var(--second);
}
.gz .vu-mot .vu-nb:first-of-type { color: #202124; font-weight: 500; }

/* 2. l'annonce au format réel, et la page de conversion en schéma.
      Côte à côte : empilées, la rangée dépassait la hauteur d'un écran. */
.gz .vu-serp {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: clamp(6px, .8vw, 12px);
}
.gz .vu-annonce {
  background: #fff; border: 1px solid var(--trait); border-radius: 12px;
  padding: 16px 20px 8px;
  box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 1px 3px 1px rgba(60,64,67,.06);
}
.gz .vu-spons {
  font-size: 13.5px; color: #202124; margin: 0 0 12px;
  padding-bottom: 11px; border-bottom: 1px solid var(--trait-clair);
}
.gz .vu-ann-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) 76px;
  gap: 16px; align-items: start;
}
.gz .vu-ann-haut { display: flex; align-items: center; gap: 10px; }
.gz .vu-favi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: #F1F3F4; border: 1px solid var(--trait-clair);
  font-size: 10px; font-weight: 500; color: #5F6368; letter-spacing: .02em;
}
.gz .vu-ann-site { min-width: 0; }
.gz .vu-ann-site b {
  display: block; font-size: 13px; font-weight: 400; color: #202124; line-height: 1.25;
}
.gz .vu-ann-site i {
  display: block; font-style: normal; font-size: 11.5px; color: #4D5156;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gz .vu-ann-pts { display: flex; flex-direction: column; gap: 2.5px; flex: none; }
.gz .vu-ann-pts s { width: 3px; height: 3px; border-radius: 50%; background: #70757A; }
.gz .vu-ann-titre {
  font-size: 19px; line-height: 1.3; color: #1A0DAB;
  margin: 9px 0 0;
}
.gz .vu-ann-txt { font-size: 13px; line-height: 1.58; margin: 6px 0 0; }
.gz .vu-ann-vign {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 8px;
  background: #F1F3F4; border: 1px solid var(--trait-clair);
}
.gz .vu-ann-vign svg {
  width: 32px; height: 32px;
  fill: none; stroke: #BDC1C6; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* les liens de site, comme Google les empile sous l'annonce */
.gz .vu-liens { list-style: none; margin: 12px 0 0; padding: 0; }
.gz .vu-liens li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; font-size: 14px; color: #202124;
  border-top: 1px solid var(--trait-clair);
}
.gz .vu-liens svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: #5F6368; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.gz .vu-fleche { display: block; width: 26px; height: 26px; margin: 0 auto; }
.gz .vu-fleche svg { transform: rotate(-90deg); }
.gz .vu-fleche svg {
  width: 100%; height: 100%;
  fill: none; stroke: #BDC1C6; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.gz .vu-page {
  border-radius: 10px; overflow: hidden; background: #fff;
  border: 1px solid var(--trait);
  box-shadow: 0 2px 6px rgba(60,64,67,.16), 0 8px 24px -10px rgba(60,64,67,.3);
}
.gz .vu-page-barre {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: #F1F3F4;
  border-bottom: 1px solid var(--trait-clair);
}
.gz .vu-page-barre s { width: 8px; height: 8px; border-radius: 50%; background: #DADCE0; flex: none; }
.gz .vu-page-barre em {
  flex: 1; min-width: 0; margin-left: 8px; padding: 4px 11px;
  background: #fff; border-radius: 999px;
  font-style: normal; font-size: 11px; color: #5F6368;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* le schéma de la page : les éléments qui comptent sont lisibles, le reste
   est posé en blocs — c'est une maquette, pas une capture déguisée */
.gz .vu-maq { padding: 0 0 16px; }
.gz .m-bandeau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--trait-clair);
}
.gz .m-logo { width: 62px; height: 11px; border-radius: 3px; background: #DADCE0; }
.gz .m-tel { font-size: 13.5px; font-weight: 500; color: #1568D6; }
.gz .m-hero { padding: 18px 16px 16px; background: #F8F9FA; }
.gz .m-h1 {
  font-size: clamp(16px, 1.7vw, 19px); font-weight: 500; line-height: 1.3;
  color: #202124; margin: 0 0 12px; max-width: 20ch;
}
.gz .m-ligne {
  display: block; height: 7px; border-radius: 3px; background: #DADCE0;
  margin-bottom: 7px; max-width: 290px;
}
.gz .m-ligne-c { max-width: 190px; margin-bottom: 16px; }
.gz .m-btns { display: flex; flex-wrap: wrap; gap: 9px; }
.gz .m-btns b, .gz .m-btns s {
  display: inline-block; text-decoration: none;
  font-size: 12.5px; font-weight: 500; padding: 9px 17px; border-radius: 6px;
}
.gz .m-btns b { background: #1A73E8; color: #fff; }
.gz .m-btns s { background: #fff; border: 1px solid var(--trait); color: #1568D6; }
.gz .m-points {
  display: flex; flex-wrap: wrap; gap: 7px 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--trait-clair);
}
.gz .m-points span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #137333;
}
.gz .m-points span::before {
  content: ''; flex: none; width: 5px; height: 9px;
  border: solid #137333; border-width: 0 1.8px 1.8px 0;
  transform: translateY(-1px) rotate(45deg);
}
.gz .m-form { padding: 14px 16px 0; }
.gz .m-form-t { font-size: 12.5px; font-weight: 500; color: #202124; margin: 0 0 11px; }
.gz .m-champ {
  display: block; height: 30px; border-radius: 6px;
  background: #fff; border: 1px solid var(--trait); margin-bottom: 8px;
}
.gz .m-champ-h { height: 44px; }
.gz .m-env {
  display: inline-block; margin-top: 4px;
  font-size: 12.5px; font-weight: 500; color: #fff;
  background: #1A73E8; padding: 9px 20px; border-radius: 6px;
}

/* 3. le suivi des appels */
.gz .vu-appel {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--trait-clair);
}
.gz .vu-appel:first-child { padding-top: 0; border-top: 0; }
.gz .vu-pic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
}
.gz .vu-pic svg { width: 17px; height: 17px; }
.gz .vu-pic-b { background: #E8F0FE; color: #1568D6; }
.gz .vu-pic-b svg { fill: currentColor; }
.gz .vu-pic-v { background: #E6F4EA; color: #137333; }
.gz .vu-pic-v svg { fill: none; stroke: currentColor; }
.gz .vu-appel b { display: block; font-size: 14.5px; font-weight: 500; }
.gz .vu-appel i {
  display: block; font-style: normal;
  font-size: 12.5px; color: var(--second); margin-top: 3px;
}
.gz .vu-appel u {
  text-decoration: none; font-size: 11.5px; color: var(--second);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* le compte tient dans sa demi-colonne : les cellules se resserrent plutôt
   que de pousser un ascenseur horizontal sous le tableau */
.gz .faire-bilan .gads-tableau th,
.gz .faire-bilan .gads-tableau td { padding: 10px 10px; font-size: 12.5px; }
.gz .faire-bilan .gads-tableau-t { padding-left: 10px; }
.gz .faire-bilan .gads-pt { margin-right: 7px; }

@media (max-width: 1000px) {
  .gz .pourquoi { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .gz .pourquoi-dit p { max-width: 58ch; }
}
@media (max-width: 900px) {
  .gz .faire-t, .gz .faire-t:nth-child(2), .gz .faire-bilan { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* en colonne, l'annonce repasse au-dessus de la page */
  .gz .vu-serp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gz .vu-fleche { margin: 14px auto; }
  .gz .vu-fleche svg { transform: none; }
  /* l'alternance n'a plus de sens en colonne : le propos passe toujours devant */
  .gz .faire-t:nth-child(even) .faire-dit { order: 0; }
  .gz .faire-dit h3, .gz .faire-dit > p { max-width: 40ch; }
}
@media (max-width: 560px) {
  .gz .vu-mots-t, .gz .vu-mot { grid-template-columns: minmax(0, 1fr) 54px 66px; }
  .gz .vu-mot { font-size: 13px; }
  .gz .vu-suggest li { font-size: 13.5px; padding-left: 16px; padding-right: 16px; }
  .gz .vu-suggest .vu-barre { padding-left: 16px; padding-right: 16px; }
}

/* ---------- les trois temps du tarif ------------------------------------ */

.gz .prix { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.gz .prix > div {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  padding: 22px 24px 26px;
  transition: box-shadow .25s ease;
}
.gz .prix > div:hover { box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.12); }
.gz .prix-quand {
  font-size: 12.5px; font-weight: 500; color: var(--second);
  margin-bottom: 12px;
}
.gz .prix-somme {
  font-size: clamp(27px, 3vw, 34px); font-weight: 400;
  color: #202124; line-height: 1.1; letter-spacing: -.01em;
}
.gz .prix-libre { font-size: 13px; color: var(--second); margin: 6px 0 14px; }
.gz .prix p { font-size: 14.5px; margin: 0; }
.gz .prix-gratuit .prix-somme { color: #137333; }


/* ---------- l'option LSA dans les tarifs -------------------------------- */

.gz .prix-option {
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 42px); align-items: start;
  margin-top: 16px; padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 32px);
  background: #fff; border: 1px solid var(--trait); border-radius: 8px;
}
.gz .prix-option-tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  color: #174EA6; background: #E8F0FE; border-radius: 999px; padding: 4px 11px;
}
.gz .prix-option h3 { font-size: 18px; font-weight: 500; margin: 0; }
.gz .prix-option p { font-size: 14.5px; line-height: 1.68; margin: 0; }
.gz .prix-option-n {
  margin-top: 12px !important; padding-top: 12px;
  border-top: 1px solid var(--trait-clair); font-size: 13.5px !important;
}

/* le budget rejoint les tarifs : il n'a plus de titre à lui, juste un filet */
.gz .budget { margin-top: clamp(28px, 3.2vw, 40px); }

/* ---------- l'inventaire de la mise en place ---------------------------- */

.gz .livr-intro {
  font-size: clamp(14.5px, 1.4vw, 16px); line-height: 1.7;
  max-width: 68ch; margin: 0 0 clamp(28px, 3.2vw, 40px);
}

/* Un inventaire, pas trois cartes : chaque poste prend une rangée, son
   intitulé à gauche et le détail à droite sur deux colonnes. */
.gz .livraison { display: grid; }
.gz .livr {
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 48px);
  padding: clamp(24px, 2.8vw, 34px) 0;
  border-top: 1px solid var(--trait);
}
.gz .livr:first-child { border-top: 0; padding-top: 0; }
.gz .livr-t { position: relative; }
.gz .livr-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: #E8F0FE; margin-bottom: 14px;
}
.gz .livr-ic svg {
  width: 20px; height: 20px;
  fill: none; stroke: #1568D6; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.gz .livr-t h3 {
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 500;
  line-height: 1.3; margin: 0 0 7px; max-width: 20ch;
}
.gz .livr-t p { font-size: 13.5px; line-height: 1.6; margin: 0; max-width: 34ch; }
/* un poste qui ne vaut que pour une option le dit sur sa première ligne */
.gz .livr-si {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: #174EA6;
}

.gz .livr-l {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(22px, 2.6vw, 40px);
}
.gz .livr-l li {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative; padding: 0 0 11px 24px;
  font-size: 14.5px; line-height: 1.6; color: var(--second);
}
.gz .livr-l li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 6px; height: 11px;
  border: solid #137333; border-width: 0 1.9px 1.9px 0;
  transform: rotate(45deg);
}


/* ---------- les Local Services Ads -------------------------------------- */

/* Deux chiffres et quatre postes : ce qui se lit d'un coup d'œil, plutôt
   qu'un paragraphe qu'il faut traverser pour trouver le prix. */
.gz .lsa-bloc {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3vw, 46px);
  margin-top: clamp(30px, 3.4vw, 44px);
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, #E9F0FD 0%, #DFEAFB 100%);
  border: 1px solid #BBD2F5; border-radius: 14px;
}
.gz .lsa-tag {
  display: inline-block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  color: #174EA6; background: #fff; border: 1px solid #C6D9F7;
  border-radius: 999px; padding: 4px 12px;
}
.gz .lsa-t { display: flex; flex-direction: column; }
.gz .lsa-t h3 {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 500;
  line-height: 1.22; letter-spacing: -.012em; margin: 0 0 10px;
}
.gz .lsa-t > p { font-size: 15px; line-height: 1.65; margin: 0; max-width: 34ch; }

/* les deux chiffres */
.gz .lsa-prix {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: auto; padding-top: clamp(20px, 2.4vw, 28px);
}
.gz .lsa-prix > div {
  background: #fff; border: 1px solid #CDDFF8; border-radius: 10px;
  padding: 16px 18px 15px;
}
.gz .lsa-prix b {
  display: block; font-size: clamp(27px, 3vw, 34px); font-weight: 400;
  line-height: 1; letter-spacing: -.015em;
}
.gz .lsa-p-offert b  { color: #137333; }
.gz .lsa-p-gestion b { color: var(--or); }
.gz .lsa-prix span {
  display: block; margin: 9px 0 5px;
  font-size: 12.5px; font-weight: 500; color: #202124;
}
.gz .lsa-prix i {
  display: block; font-style: normal;
  font-size: 12px; line-height: 1.45; color: var(--second);
}

/* les quatre postes de la gestion */
.gz .lsa-c {
  background: #fff; border: 1px solid #CDDFF8; border-radius: 12px;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
}
.gz .lsa-c-t {
  font-size: 11.5px; font-weight: 500; color: var(--second);
  letter-spacing: .04em; margin: 0 0 4px;
}
.gz .lsa-c ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 22px;
}
.gz .lsa-c li { padding: 16px 0 0; }
.gz .lsa-c li > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: #E8F0FE; margin-bottom: 10px;
}
.gz .lsa-c li svg {
  width: 17px; height: 17px;
  fill: none; stroke: #1568D6; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.gz .lsa-c li b {
  display: block; font-size: 14px; font-weight: 500; line-height: 1.35;
  margin-bottom: 4px;
}
.gz .lsa-c li i {
  display: block; font-style: normal;
  font-size: 12.5px; line-height: 1.5; color: var(--second);
}

.gz .lsa-n {
  grid-column: 1 / -1;
  font-size: 13px; line-height: 1.6; margin: 0;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid #C6D9F7;
}

@media (max-width: 900px) {
  .gz .lsa-bloc { grid-template-columns: minmax(0, 1fr); }
  .gz .lsa-t > p { max-width: 46ch; }
}
@media (max-width: 520px) {
  .gz .lsa-prix, .gz .lsa-c ul { grid-template-columns: minmax(0, 1fr); }
  .gz .lsa-c li { padding-top: 14px; }
}

@media (max-width: 900px) {
  .gz .prix-option, .gz .livr { grid-template-columns: minmax(0, 1fr); }
  .gz .livr-t h3, .gz .livr-t p { max-width: 42ch; }
}
@media (max-width: 680px) {
  .gz .livr-l { columns: 1; }
}

/* ---------- ce que comprend la mise en place ---------------------------- */

.gz .inclus-c {
  background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  transition: box-shadow .25s ease;
}
.gz .inclus-c:hover { box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.12); }
.gz .inclus-c h3 { color: #1568D6; }
.gz .inclus-c li { color: var(--second); border-top-color: var(--trait-clair); }
.gz .inclus-c li::before { background: #137333; }
.gz .inclus-note { color: var(--second); max-width: 92ch; }

/* ---------- le budget --------------------------------------------------- */

.gz .budget { background: #fff; border: 1px solid var(--trait); border-radius: 10px; }
.gz .budget-chiffre span { color: var(--second); }
.gz .budget-chiffre b { color: var(--or); }
.gz .budget-chiffre i { color: var(--second); }
.gz .budget-p span { background: #FEF7E0; color: #8A5300; }
.gz .budget-p b { color: #202124; }
.gz .budget-p p { color: var(--second); }

/* ---------- pour qui ---------------------------------------------------- */

.gz .pourqui-c {
  background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  transition: box-shadow .25s ease;
}
.gz .pourqui-c:hover { box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.12); }
.gz .pourqui-c::after { display: none; }
.gz .pourqui-oui { --ton: #137333; --voile: #E6F4EA; }
.gz .pourqui-non { --ton: #C5221F; --voile: #FCE8E6; }
.gz .pourqui-c h3 span { background: var(--voile); }
.gz .pourqui-c li { color: var(--second); border-top-color: var(--trait-clair); }
.gz .pourqui-note { color: var(--second); max-width: 92ch; }

/* ---------- le tableau de bord, déjà clair ------------------------------ */

.gz .gads-zone { margin: 0; padding-left: 0; padding-right: 0; max-width: none; }
.gz .gads { box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gz .gads-note { color: var(--second); }


/* ---------- les bulles ---------------------------------------------------
   Le dispositif propre à cette page : les faits sont posés en pastilles
   plutôt que noyés dans un paragraphe. Trois mots se lisent, quatre lignes
   se sautent.
   -------------------------------------------------------------------------- */

.gz .bulles {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 13px 0 0; padding: 0;
}
.gz .bulles b {
  /* sans plafond, une pastille un peu longue refuse de se couper et pousse
     la colonne hors de l'écran sur un petit téléphone */
  display: inline-block; max-width: 100%;
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  color: #3C4043; background: #fff;
  border: 1px solid var(--trait); border-radius: 999px;
  padding: 6px 13px;
  transition: border-color .2s ease, background .2s ease;
}
.gz .bulles b:hover { border-color: #BDC1C6; }

/* chaque cas teinte ses bulles dans sa couleur */
.gz .bulles-j b { background: #FEF7E0; border-color: #FDE293; color: #8A5300; }
.gz .bulles-o b { background: #FEEFE3; border-color: #FBC89E; color: #A8500A; }
.gz .bulles-r b { background: #FCE8E6; border-color: #F6AEA9; color: #C5221F; }

/* Les points du budget sont de longueur très inégale : en guirlande ils
   retombaient n'importe où. Posés en grille, ils s'alignent et se comparent. */
.gz .bulles-grand {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.gz .bulles-grand b {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; line-height: 1.4; padding: 13px 18px;
  border-radius: 8px;
  background: #E8F0FE; border-color: #D2E3FC; color: #174EA6;
}
.gz .bulles-grand b::before {
  content: ''; flex: none; width: 7px; height: 12px;
  border: solid #1568D6; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.gz .budget-note {
  font-size: 13.5px; color: var(--second); line-height: 1.6;
  margin: 16px 0 0; max-width: 72ch;
}


/* ---- lisibilité sur téléphone ------------------------------------------
   Les étiquettes de la zone claire passent le plancher des 12 px. Les
   libellés qui vivent à l'intérieur d'une maquette d'interface (fil
   d'adresse, pastille d'état, favicon) gardent leur taille : les grossir
   casserait la ressemblance avec ce qu'on montre. */
@media (max-width: 600px) {
  .gz .lsa-tag, .gz .prix-option-tag,
  .gz .livr-si, .gz .lsa-c-t,
  .gz .faire-pq b, .gz .sys-chaine i { font-size: 12.5px; }
  .gz .vu-leg, .gz .gads-note,
  .gz .lsa-prix i, .gz .lsa-c li i,
  .gz .budget-note, .gz .prix-option-n, .gz .lsa-n { font-size: 13px; }
  .gz .bulles b { font-size: 13px; }
  .gz .vu-mots-t { font-size: 12.5px; }
}

/* ---- les très petits écrans (320 px) ----------------------------------- */
@media (max-width: 345px) {
  /* l'onde fait 248 px de diamètre depuis le centre de la scène : sur un
     écran de 320 px elle sortait de la page */
  .ga-onde { width: 196px; height: 196px; margin: -98px 0 0 -98px; }
  /* le tableau du compte se parcourt latéralement, dans sa boîte */
  .gz .faire-bilan .gads-tableau, .gads-tableau { overflow-x: auto; }
  .gz .faire-bilan .gads-tableau table, .gads-tableau table { min-width: 560px; }
}