/* ==========================================================================
   AMPIXELWEB — sections.css
   Sections de contenu de la page d'accueil, dans l'ordre de la page.
   Chaque section a sa propre mise en page : on n'empile jamais dix blocs
   « titre centré + trois cartes ».
   ========================================================================== */

/* ==========================================================================
   03 — Le constat
   Bloc éditorial : gros titre à gauche, liste de douleurs à droite.
   Pas de carte, uniquement de la typographie et des filets.
   ========================================================================== */

.pain__layout {
  display: grid;
  /* La photo prend la part large : c'est elle qui porte la section. */
  grid-template-columns: 0.72fr 1.28fr;
  /* Gouttiere verticale plus courte que l'horizontale : le titre doit rester
     accroche a ce qu'il annonce, pas flotter au-dessus. */
  gap: clamp(2.2rem, 3.6vw, 3.4rem) clamp(2rem, 4.5vw, 4.5rem);
  align-items: stretch;
}
/* Le titre occupe la rangée entière ; le texte et la photo se partagent celle du
   dessous, avec la part large pour la photo. */
.pain__head { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Trait manuscrit sous « bonnes mains ». Même intention que le bandeau des
   pages intérieures, geste différent : deux passages de feutre au lieu de la
   boucle fermée, le second plus court et plus léger, comme une main qui
   repasse dessus sans viser exactement le même trait.
   Un fond, pas un ::after sur un inline-block : le mot reste inline, donc le
   point final qui le suit ne peut pas être rejeté seul en tête de ligne.
   Le padding-bas n'écarte pas les lignes — il est ignoré dans le calcul de la
   hauteur d'un inline — il ne fait que réserver la zone où le fond se dessine.
   Volontairement limité à ce titre : .t-em sert dans une douzaine d'autres,
   où un trait partout deviendrait du bruit.
   -------------------------------------------------------------------------- */
.pain__head .t-em {
  padding-bottom: 0.36em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20300%2026%22%20preserveAspectRatio=%22none%22%20fill=%22none%22%20stroke=%22rgb%28249,115,22%29%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2010%20C64%203%20168%202%20292%208%22%20stroke-width=%223.6%22/%3E%3Cpath%20d=%22M22%2019%20C92%2014%20196%2013%20274%2017%22%20stroke-width=%222.4%22/%3E%3C/svg%3E") no-repeat center bottom / 100% 0.50em;
}
@media (max-width: 560px) {
  .pain__head .t-em { padding-bottom: 0.28em; background-size: 100% 0.40em; }
}

/* Colonne de gauche de la seconde rangée : calée en haut, face à la photo. */
.pain__aside { align-self: start; }

/* Plus de chapô au-dessus : le filet et son retrait n'ont plus rien à séparer,
   la colonne démarre donc directement en haut, alignée sur la photo. */
.pain__id {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 1.9rem);
}
.pain__id-title {
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.55rem;
}
.pain__id-block p {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--text-mid);
  max-width: 46ch;
}
/* Le bloc « L'entreprise » porte maintenant deux paragraphes : sans cette
   respiration ils se colleraient l'un à l'autre. */
.pain__id-block p + p { margin-top: 0.9rem; }

/* Photo : ratio 3/2, celui du fichier d’origine — aucun recadrage, et une hauteur
   qui lui donne enfin du poids face au titre pleine largeur. L’image est en
   position absolue pour recadrer plutôt que se déformer si la cellule s’étire. */
.pain__photo {
  position: relative;
  align-self: end;
  aspect-ratio: 3 / 2;
  min-height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* <picture> ne doit pas créer de line-box : l’image est hors flux. */
.pain__photo picture { display: block; }
.pain__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 46%;
}

/* ==========================================================================
   04 — Services : carrousel « coverflow » 3D
   Portage du composant React fourni. Les valeurs de scène sont reprises telles
   quelles : cartes 330x500, perspective 1400px, décalage 285px, échelle 0.84,
   rotation 24deg, transition 800ms cubic-bezier(.25,1,.5,1).

   Différence assumée avec le composant d'origine : sa cascade teste
   `offset === 2` AVANT `offset === total - 1`. Avec cinq éléments cela marche,
   avec trois les deux cartes latérales partiraient toutes deux à droite. Ici la
   position découle d'un décalage SIGNÉ (--d), donc la scène reste symétrique
   quel que soit le nombre de cartes.
   ========================================================================== */

.svcx {
  position: relative;
  background: var(--paper);
  color: var(--text);
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vh, 6rem);
}

/* Ambiance : la couleur de la carte active, diffusée en halo clair sur le
   fond papier. Volontairement discrète : au-delà de 0.16 l'orange vire au
   rose sur les neutres chauds. */
.cf__ambience {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%,
      rgba(var(--amb, 249, 115, 22), 0.16) 0%,
      rgba(var(--amb, 249, 115, 22), 0.05) 46%,
      rgba(255, 247, 237, 0) 74%);
  transition: background 1s ease;
}

.cf__head {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.cf__head h2 { color: var(--text); margin-bottom: 0.9rem; }
.cf__head .lead { color: var(--text-mid); margin-inline: auto; }

.cf__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember);
}
.cf__eyebrow span { width: 36px; height: 1px; }
.cf__eyebrow span:first-child { background: linear-gradient(90deg, transparent, var(--orange)); }
.cf__eyebrow span:last-child { background: linear-gradient(90deg, var(--orange), transparent); }

.cover {
  position: relative;
  z-index: 2;
  /* Hauteur de la scene, partagee. Les fleches s'alignent sur sa moitie : les
     deux valeurs etaient calculees a la main l'une d'apres l'autre (260 pour
     520), elles ne peuvent plus se desynchroniser en changeant la taille des
     cartes. */
  --stage-h: 620px;
}

.cover__stage {
  position: relative;
  height: var(--stage-h);
  perspective: 1400px;
  transform-style: preserve-3d;
}

.cover__card {
  --w: min(390px, 80vw);
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 590px;
  margin-left: calc(var(--w) / -2);
  border-radius: 18px;
  overflow: hidden;
  background: #241a10;
  border: 1px solid rgba(20, 16, 11, 0.10);
  transform-origin: center center;
  cursor: pointer;
  z-index: var(--z, 1);
  transform:
    translateX(calc(var(--d, 0) * 335px))
    rotateY(calc(var(--d, 0) * -24deg))
    scale(calc(1 - var(--abs, 0) * 0.16));
  opacity: calc(1 - var(--abs, 0) * 0.10);
  filter:
    brightness(calc(1 + var(--abs, 0) * 0.06))
    saturate(calc(1 - var(--abs, 0) * 0.38));
  box-shadow: 0 16px 34px -18px rgba(20, 16, 11, 0.50);
  transition: all 800ms cubic-bezier(0.25, 1, 0.5, 1);
}

.cover__card.is-active {
  cursor: default;
  box-shadow:
    0 28px 60px -26px rgba(20, 16, 11, 0.55),
    0 0 30px rgba(var(--c), 0.20);
}

/* Le visuel. Renseigner --photo sur la carte pour passer en photographie :
   style="--photo: url('../img/service-01.jpg')"

   ATTENTION au chemin. Dans une propriete personnalisee, url() est resolu par
   rapport a la FEUILLE DE STYLE qui consomme la variable -- ce fichier, donc
   assets/css/ -- et non par rapport a la page HTML qui la declare. Le chemin
   part donc toujours de assets/css/, meme ecrit en style inline dans le HTML.
   Avantage : la meme valeur marche depuis index.html et depuis pages/*.html. */
.cf__photo {
  position: absolute;
  inset: 0;
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
}
/* Repli composé, tant qu'aucune photo n'est fournie. */
.cf__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 26% 18%, rgba(var(--c), 0.55) 0%, rgba(var(--c), 0) 62%),
    radial-gradient(ellipse 70% 50% at 82% 74%, rgba(var(--c), 0.30) 0%, rgba(var(--c), 0) 60%),
    linear-gradient(155deg, #3a2c1d 0%, #241a10 56%, #14100b 100%);
}
.cover__card[style*="--photo"] .cf__photo::after { display: none; }

/* --------------------------------------------------------------------------
   Visuels : <img> plutot que background-image

   Une image posee en fond CSS n'existe pour personne d'autre que l'oeil : ni
   pour Google Images, ni pour un lecteur d'ecran, ni pour le referencement du
   contenu de la page. Les visuels sont donc de vraies balises <img> avec un
   texte alternatif ; l'element parent ne sert plus que de cadre.

   :has(img) remplace l'ancien test [style*="--photo"] : le repli decoratif ne
   s'efface plus parce qu'une variable CSS est presente, mais parce qu'une
   image est reellement la. Plus honnete, et robuste si le style inline bouge.
   -------------------------------------------------------------------------- */
.cf__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf__photo:has(img)::after { display: none; }

/* Vignette : reprise à l'identique du composant. */
.cf__scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.10) 25%,
    rgba(0, 0, 0, 0.68) 60%,
    rgba(0, 0, 0, 0.96) 100%);
}

.cf__content {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100%;
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  /* Le texte reste lisible sur les cartes laterales, simplement attenue selon
     l'eloignement (--abs vaut 0 sur la carte active, 1 sur ses voisines). Les
     clics restent neutralises tant que la carte n'est pas active : cliquer une
     carte laterale la ramene au centre au lieu de suivre son lien. */
  opacity: calc(1 - var(--abs, 0) * 0.28);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.cover__card.is-active .cf__content {
  opacity: 1;
  pointer-events: auto;
}

.cf__tag {
  text-align: right;
  padding-right: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.cf__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  padding-bottom: 4px;
}

.cf__title {
  font-family: var(--font-titre);
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95);
}

.cf__sub {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #f3f0ea;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
}

.cf__rule {
  width: 34px;
  height: 2px;
  margin: 6px auto 5px;
  border-radius: 2px;
  background: rgb(var(--c));
  box-shadow: 0 0 8px rgba(var(--c), 0.75);
}

.cf__desc {
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 320px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Texte encre sur l'aplat orange : 6,7:1. Du blanc tomberait à 2,8:1. */
.cf__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.68rem 1.3rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dk) 100%);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(20, 16, 11, 0.55), 0 0 15px rgba(249, 115, 22, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cf__cta:hover, .cf__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(20, 16, 11, 0.60), 0 0 22px rgba(249, 115, 22, 0.42);
}

/* --- Flèches --- */

.cover__nav {
  position: absolute;
  top: calc(var(--stage-h) / 2);
  z-index: 40;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 247, 237, 0.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(20, 16, 11, 0.45);
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, color 0.2s ease;
}
.cover__nav:hover, .cover__nav:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  transform: scale(1.07);
}
.cover__nav--prev { left: clamp(0.5rem, 3vw, 3rem); }
.cover__nav--next { right: clamp(0.5rem, 3vw, 3rem); }

/* --- Puces --- */

.cover__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}
.cover__dot {
  height: 8px;
  width: 8px;
  border-radius: var(--r-pill);
  background: rgba(20, 16, 11, 0.18);
  transition: all 0.3s ease;
}
.cover__dot:hover { background: rgba(20, 16, 11, 0.34); }
.cover__dot[aria-selected="true"] {
  width: 28px;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.45);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  /* En dessous du desktop on revient a la geometrie d'origine : la carte
     agrandie ne laisse plus assez de place aux deux cartes laterales, qui
     sortent de l'ecran des ~900px. Les valeurs ci-dessous sont celles, eprou-
     vees, d'avant l'agrandissement : elles tiennent jusqu'au palier des 700px. */
  .cover { --stage-h: 520px; }
  .cover__card {
    --w: min(330px, 78vw);
    height: 500px;
    transform:
      translateX(calc(var(--d, 0) * 240px))
      rotateY(calc(var(--d, 0) * -22deg))
      scale(calc(1 - var(--abs, 0) * 0.18));
  }
  .cf__content { padding: 20px 18px 22px; }
  .cf__title { font-size: 1.65rem; }
  .cf__sub { font-size: 1.05rem; }
  .cf__desc { font-size: 0.86rem; max-width: 280px; margin-bottom: 12px; }
}

@media (max-width: 700px) {
  .cover { --stage-h: 500px; }
  .cover__stage { perspective: 1000px; }
  .cover__card {
    --w: min(300px, 82vw);
    height: 480px;
    transform:
      translateX(calc(var(--d, 0) * 172px))
      rotateY(calc(var(--d, 0) * -18deg))
      scale(calc(1 - var(--abs, 0) * 0.22));
    opacity: calc(1 - var(--abs, 0) * 0.22);
  }
  .cover__nav { top: auto; bottom: -14px; }
  .cover__nav--prev { left: 50%; margin-left: -64px; }
  .cover__nav--next { right: 50%; margin-right: -64px; }
  .cover__dots { margin-top: 4.6rem; }
  .cf__title { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cover__card, .cf__content, .cf__ambience { transition: none !important; }
}

/* ==========================================================================
   06 — Méthode
   Timeline horizontale reliée par un fil continu.
   ========================================================================== */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vh, 4rem);
}
/* Le fil conducteur */
.steps::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(249, 115, 22, 0) 0%,
    rgba(249, 115, 22, 0.55) 12%,
    rgba(249, 115, 22, 0.55) 88%,
    rgba(249, 115, 22, 0) 100%);
}
.step { position: relative; text-align: center; padding-inline: 0.5rem; }
.step__bullet {
  position: relative;
  z-index: 1;
  width: 42px; height: 42px;
  margin: 0 auto 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--parchment);
  border: 1px solid var(--orange);
  font-family: var(--font-titre);
  font-size: 0.95rem;
  color: var(--ember);
}
.section--sand .step__bullet { background: var(--sand); }
.step h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.92rem; color: var(--text-mid); }
.step__time {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ==========================================================================
   07 — Réalisations
   ========================================================================== */

.work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
/* Tuile : le visuel occupe toute la carte, il n'y a plus de colonne de texte
   en dessous. Seuls le secteur et le nom restent, incrustes en bas ; tags et
   resultat n'apparaissent qu'a l'ouverture. */
.work__card {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}
.work__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Bento : rythme 2+1 / 1+2 / 2+1, comme le LayoutGrid d'origine. Les cartes
   larges passent en 16/9, sinon le 4/3 les rendrait enormes. */
.work__card--wide { grid-column: span 2; }
/* Les filtres portaient l'ecart entre le chapeau de section et la grille ;
   sans eux il faut le rendre a la grille. */
.svc-intro + .work { margin-top: clamp(2rem, 4vh, 3rem); }
.work__card { cursor: pointer; }
/* Hauteur de vignette commune plutot qu'un ratio : dans un bento, deux cartes
   de largeurs differentes doivent quand meme aligner leurs metadonnees.
   Selecteur a deux niveaux a dessein : la regle .work__thumb de base est plus
   bas dans le fichier, il faut la battre en specificite et non en ordre. */
.work .work__thumb {
  aspect-ratio: auto;
  height: clamp(215px, 21vw, 310px);
  border-radius: 0;
  border: 0;
  /* Marge basse : la maquette est centree dans la tuile, sans ce retrait elle
     passe sous l'incrustation du nom sur les tuiles courtes. */
  padding: 1.4rem 1.4rem 4.2rem;
}

/* ---- Panneau d'ouverture ---- */
.work-open {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.work-open[hidden] { display: none; }
.work-open__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 11, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.work-open.is-open .work-open__scrim { opacity: 1; }
.work-open__box {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  /* Point de depart du morphing : pose en JS depuis le rectangle de la carte. */
  transform-origin: 50% 50%;
  transition: transform 0.42s var(--ease), opacity 0.42s var(--ease);
}
.work-open__close {
  position: absolute;
  top: clamp(1.2rem, 3vw, 1.8rem);
  right: clamp(1.2rem, 3vw, 1.8rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--on-dark);
  background: rgba(20, 16, 11, 0.55);
  transition: background 0.25s var(--ease);
}
.work-open__close:hover { background: rgba(20, 16, 11, 0.8); }
.work-open__thumb .work__thumb { aspect-ratio: 16 / 9; }
.work-open__thumb .work__screen { transform: none; }
.work-open__meta { padding-top: 1.4rem; }
.work-open__nom {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0.5rem 0 0.9rem;
}
.work-open__meta .work__result { margin-top: 1.1rem; }
.work-open__meta .btn { margin-top: 1.6rem; }

body.has-modal { overflow: hidden; }

.work__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--espresso);
  display: grid;
  place-items: center;
  padding: 1.4rem;
}
/* Chaque vignette reçoit sa propre teinte via --tint (défini en HTML) */
.work__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 80% at 30% 25%, var(--tint, rgba(249, 115, 22, 0.3)) 0%, rgba(20, 16, 11, 0) 68%);
}
.work__screen {
  position: relative;
  width: 100%;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  transition: transform 0.5s var(--ease);
}
.work__card:hover .work__screen { transform: translateY(-6px) scale(1.015); }
.work__screen-bar {
  display: flex;
  gap: 0.28rem;
  padding: 0.45rem 0.6rem;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.work__screen-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20, 16, 11, 0.2); }
.work__screen-body { padding: 0.85rem; display: grid; gap: 0.45rem; }
.work__screen-body .b {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: rgba(20, 16, 11, 0.13);
}
.work__screen-body .b--accent { background: var(--orange); width: 38%; height: 9px; }
.work__screen-body .b--wide { width: 86%; }
.work__screen-body .b--mid  { width: 64%; }
.work__screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.25rem; }
.work__screen-grid i { display: block; height: 22px; border-radius: 3px; background: rgba(20, 16, 11, 0.09); }

/* Corps de fenetre portant une vraie capture, la ou les projets de
   demonstration affichent un gabarit abstrait. Le bandeau a pastilles est
   conserve -- c'est lui qui donne la lecture "site en ligne" -- mais le
   rembourrage saute : une page affichee touche les bords de sa fenetre.
   Reserve aux grands cadres (fiche projet), ou la hauteur est libre. */
.work__screen-shot { display: block; }
.work__screen-shot img { display: block; width: 100%; height: auto; }

/* Vignette de tuile portant une vraie capture. Le cadre de tuile a une hauteur
   FIXE et non un ratio (voir .work .work__thumb) : le gabarit abstrait s'en
   accommode, sa hauteur suivant son maigre contenu, mais une capture large
   etiree sur toute la largeur devenait bien plus haute que le cadre, qui la
   rognait en haut comme en bas -- le bandeau du navigateur coupe en deux et le
   bas du site disparu. Elle occupe donc tout le cadre, cadree par le haut :
   logo, menu et titre sont ce qu'on doit reconnaitre dans une vignette.
   Le voile du nom, deja prevu pour passer sur une maquette claire, garde le
   texte lisible par-dessus. Les deux selecteurs a deux classes battent la
   regle .work .work__thumb dans la grille comme dans le panneau ouvert. */
.work .work__thumb--shot,
.work-open__thumb .work__thumb--shot { padding: 0; }
/* La capture garde TOUTE sa largeur et c'est le bas qui deborde du cadre.
   Un object-fit: cover paraissait plus simple, mais il rogne du cote ou l'image
   est en trop : sur la tuile large il mangeait le bas -- ce qu'on veut -- et
   sur la tuile etroite il mangeait les cotes, coupant le titre du site en plein
   milieu et faisant disparaitre le logo. En largeur imposee, le recadrage se
   fait toujours par le bas, quelle que soit la largeur de la tuile.
   Sur les tuiles etroites l'image ne descend pas jusqu'en bas : la bande qui
   reste tombe pile sous le voile du nom, qui la remplit. */
.work__shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.work__shot picture { display: block; }
.work__shot img { display: block; width: 100%; height: auto; }

/* Voile renforce quand la vignette porte une capture. Sur le gabarit abstrait,
   le degrade d'origine suffisait : il ne couvrait que des barres grises. Sur
   une vraie page, le nom de la tuile tombait au milieu des boutons du site
   photographie -- deux textes l'un sur l'autre. Le voile monte donc plus haut
   et plus opaque, jusqu'a noyer ce qui passe dessous. */
.work__card--shot .work__meta {
  padding-top: 3.8rem;
  background: linear-gradient(to top,
    rgba(20, 16, 11, 0.96) 0%,
    rgba(20, 16, 11, 0.84) 40%,
    rgba(20, 16, 11, 0.38) 74%,
    rgba(20, 16, 11, 0) 100%);
}

.work__meta { padding-top: 1.2rem; }
.work__sector {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.work__name { font-size: 1.24rem; margin-bottom: 0.5rem; transition: color 0.3s var(--ease); }

/* Incrustation sur la tuile. Le voile part du bas : sans lui le nom tombe sur
   la maquette claire du navigateur et devient illisible. */
.work__card .work__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 2.6rem 1.35rem 1.15rem;
  background: linear-gradient(to top,
    rgba(20, 16, 11, 0.88) 0%,
    rgba(20, 16, 11, 0.52) 48%,
    rgba(20, 16, 11, 0) 100%);
  pointer-events: none;
}
.work__card .work__sector { color: rgba(242, 235, 221, 0.6); margin-bottom: 0.3rem; }
.work__card .work__name   { color: var(--on-dark); margin-bottom: 0; }
/* Tags et resultat ne vivent que dans le panneau ouvert. */
.work__card .work__tags,
.work__card .work__result { display: none; }
.work__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }
.work__result {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--text-mid);
}
.work__result strong { color: var(--ember); font-weight: 500; }
.work__result svg { flex: none; color: var(--orange); }

/* Tuiles "travaux en cours" : des places tenues, pas des references. Elles
   gardent le rythme bento tant qu'un seul projet est publie, sans faire passer
   une maquette pour un site livre. Ce sont des <div> et non des <a> : il n'y a
   rien a ouvrir, donc ni curseur main ni soulevement au survol. */
.work__card--soon { cursor: default; }
.work__card--soon:hover { transform: none; box-shadow: none; }
.work__card--soon:hover .work__screen { transform: none; }
.work__card--soon .work__thumb { border: 1px dashed rgba(242, 235, 221, 0.2); }
/* La maquette passe en retrait : la tuile doit se lire comme un chantier. */
.work__card--soon .work__screen { opacity: 0.42; box-shadow: none; }
.work__soon {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: rgba(20, 16, 11, 0.72);
  border: 1px solid rgba(242, 235, 221, 0.16);
  color: var(--on-dark);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.work__soon i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: soonPulse 2.6s var(--ease) infinite;
}
@keyframes soonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ==========================================================================
   09 — Ancrage local
   ========================================================================== */

/* La carte prend la part la plus large des deux colonnes : c'est elle qui
   porte le propos de la section, le texte se contente de l'accompagner. */
.geo {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.geo__map {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  width: 100%;
  margin-inline: auto;
}

/* La carte Leaflet est posée derrière le plan dessiné : elle se construit et
   charge ses tuiles sans que la section clignote. Le repli ne disparaît qu'au
   premier carreau réellement arrivé — donc jamais si le réseau est coupé. */
.geo__leaflet {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--geo-paper);
}
.geo__fallback { position: absolute; inset: 0; z-index: 1; }
.geo__fallback svg { width: 100%; height: 100%; display: block; }
.geo__map.is-live .geo__fallback { display: none; }

/* Les tuiles OpenStreetMap brutes sont bien trop colorées pour cette page.
   Ce filtre les vide de leur couleur, les éclaircit et les réchauffe : on
   retrouve un fond de carte gris-sable qui laisse toute la place au disque
   orange et aux étiquettes, sans effacer les noms de villes. */
.geo__leaflet .leaflet-tile-pane {
  filter: grayscale(1) brightness(1.26) contrast(0.52) sepia(0.14);
}
/* Le cadrage se fait au zoom fractionnaire (zoomSnap 0.25) pour coller au
   disque des 45 minutes : les tuiles sont alors mises à l'échelle une par une,
   et l'arrondi laisse par endroits une rayure claire d'un pixel entre deux
   carreaux. Un pixel d'élargissement les fait se recouvrir — l'étirement de
   0,4 % est invisible, la jointure disparaît. */
.geo__leaflet .leaflet-tile {
  width: 257px !important;
  height: 257px !important;
}

/* Repères : une pastille posée sur la coordonnée, une étiquette à côté.
   L'icône Leaflet fait 0x0, tout le placement est fait ici — l'étiquette peut
   donc s'allonger sans jamais décaler le point qu'elle désigne. */
.geo-pin { position: relative; }
.geo-pin__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(20, 16, 11, 0.3);
}
.geo-pin__nom {
  position: absolute;
  left: 11px;
  top: -11px;
  padding: 3px 9px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 16, 11, 0.2);
  font-family: var(--font-corps);
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
/* Étiquette renvoyée du côté gauche : soit fixée ainsi (Genève, trop près
   d'Annemasse), soit basculée par geo-map.js quand elle déborderait du cadre. */
.geo-pin--gauche .geo-pin__nom { left: auto; right: 11px; }

/* Cadre étroit : « Annemasse, basé ici » part du centre de la carte et sortait
   du cadre. Étiquettes resserrées plutôt que texte raccourci — le nom complet
   est ce qui fait le message de la section. */
@media (max-width: 620px) {
  .geo-pin__nom {
    padding: 2px 7px;
    font-size: 9px;
    letter-spacing: 0.07em;
  }
}

/* Chrome Leaflet rhabillé : mêmes filets, mêmes rayons et même famille
   typographique que le reste de la page. */

.geo__leaflet .leaflet-bar {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 16, 11, 0.14);
}
.geo__leaflet .leaflet-bar a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  color: var(--text-mid);
  font-size: 17px;
  font-weight: 300;
}
.geo__leaflet .leaflet-bar a:last-child { border-bottom: 0; }
.geo__leaflet .leaflet-bar a:hover,
.geo__leaflet .leaflet-bar a:focus-visible { background: var(--geo-paper); color: var(--text); }
.geo__leaflet .leaflet-bar a.leaflet-disabled { background: #fff; color: var(--text-dim); }

.geo__leaflet .leaflet-control-attribution {
  padding: 2px 7px;
  border-radius: 6px 0 0 0;
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--font-corps);
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
.geo__leaflet .leaflet-control-attribution a { color: var(--text-mid); text-decoration: none; }
.geo__leaflet .leaflet-control-attribution a:hover { text-decoration: underline; }

/* Fond de carte : papier, eau, relief, rivières, autoroute, frontière.
   Les tons restent dans la palette chaude du site — l'eau est le seul écart,
   volontairement désaturée pour ne pas trouer la page. */
.geo__paper  { fill: var(--geo-paper); }
.geo__frame  { fill: none; stroke: var(--line); stroke-width: 1; }
.geo__water  { fill: var(--geo-water); }
/* Massifs (Salève, Voirons) : contour organique adouci par un flou, pour
   suggérer le relief sans imiter des courbes de niveau. */
.geo__relief { fill: rgba(20, 16, 11, 0.045); filter: blur(3.5px); }
.geo__road-label {
  font-family: var(--font-corps);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--text-dim);
  stroke: var(--geo-paper);
  stroke-width: 3.5px;
  paint-order: stroke fill;
}
.geo__country {
  font-family: var(--font-corps);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: var(--text-dim);
  opacity: 0.75;
}
.geo__scale path { fill: none; stroke: var(--text-dim); stroke-width: 1; }
.geo__scale text {
  font-family: var(--font-corps);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  fill: var(--text-dim);
}
.geo__river  { fill: none; stroke: var(--geo-water-dk); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.geo__road   { fill: none; stroke: rgba(20, 16, 11, 0.17); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.geo__border { fill: none; stroke: rgba(20, 16, 11, 0.34); stroke-width: 1; stroke-dasharray: 5 4; stroke-linecap: round; }

.geo__ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.geo__ring--dashed { stroke-dasharray: 3 7; opacity: 0.7; }
.geo__pin-core { fill: var(--orange); }
.geo__pin-halo { fill: rgba(249, 115, 22, 0.16); }
.geo__dot { fill: var(--ember); }
.geo__dot--city { fill: var(--text); }
.geo__label--city { fill: var(--text); letter-spacing: 0.16em; }

/* Villes hors cadre : une flèche sur le bord, orientée dans leur vraie direction. */
.geo__off-arrow { fill: var(--text-dim); }
.geo__off-label {
  font-family: var(--font-corps);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--text-mid);
}
.geo__off-time { fill: var(--ember); }
.geo__label {
  font-family: var(--font-corps);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--text-mid);
}
.geo__label--main {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  fill: var(--text);
}
.geo__radius-label {
  font-family: var(--font-corps);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--text-dim);
  /* Détoure l'étiquette pour qu'elle interrompe proprement le cercle pointillé */
  stroke: var(--geo-paper);
  stroke-width: 4px;
  paint-order: stroke fill;
}

.geo__towns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 2rem;
}
.geo__town {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  color: var(--text-mid);
  background: rgba(255, 255, 255, 0.4);
}
.geo__town--main { border-color: var(--orange); color: var(--ember); background: rgba(249, 115, 22, 0.08); font-weight: 500; }

/* Pastilles cliquables. Les villes qui ont leur propre page deviennent des
   liens : c'est le lien contextuel le plus fort du site vers ces pages, parce
   qu'il est entouré de texte qui parle déjà de zone d'intervention. Le style
   ne change pas au repos — seul le survol révèle qu'on peut cliquer. */
a.geo__town {
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
a.geo__town:hover,
a.geo__town:focus-visible {
  border-color: var(--orange);
  color: var(--ember);
  background: rgba(249, 115, 22, 0.1);
}

/* Flex plutot que grille fixe : le bloc s'adapte au nombre de chiffres, qu'il
   y en ait un ou plusieurs, sans laisser de colonne vide. */
.geo__facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 2rem; }
.geo__facts > * { flex: 0 1 auto; max-width: 340px; }
.geo__fact { padding-left: 1.1rem; border-left: 2px solid var(--orange); }
.geo__fact b {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.geo__fact span { font-size: 0.85rem; color: var(--text-mid); }

/* ==========================================================================
   11 — FAQ
   ========================================================================== */

/* Titre pleine largeur, centre, puis deux colonnes : questions a gauche,
   photo a droite. */
.faq__head {
  text-align: center;
  /* Largeur en rem, pas en ch : ici le ch se calcule sur la police de corps
     du corps de texte, pas sur celle du titre, et donnait un bloc trop etroit
     qui cassait le titre en trois lignes. */
  max-width: 36rem;
  margin: 0 auto clamp(2.8rem, 5vw, 4rem);
}
/* Sous ~400px, la premiere ligne ne tient plus : on laisse le titre se replier
   librement plutot que de le faire deborder. */
@media (max-width: 400px) {
  .faq__head br { display: none; }
}

.faq__layout {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.faq__list { border-top: 1px solid var(--line); }

.faq__item {
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* L'item ouvert se detache en carte : fond clair, ombre portee, filets
   neutralises. La carte deborde vers l'exterieur (marge negative compensee par
   le padding) pour que le texte des questions ne bouge pas a l'ouverture ;
   le debord reste sous la gouttiere minimale du .shell (1.25rem). */
.faq__item:has(.faq__q[aria-expanded="true"]) {
  --faq-card-pad: clamp(0.6rem, 1.6vw, 1.5rem);
  margin-inline: calc(-1 * var(--faq-card-pad));
  padding-inline: var(--faq-card-pad);
  background: var(--parchment);
  box-shadow: var(--shadow-md);
  border-bottom-color: transparent;
}
.faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
  font-family: var(--font-titre);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.35;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.faq__q:hover { color: var(--ember); }
.faq__sign {
  position: relative;
  width: 20px; height: 20px;
  flex: none;
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--orange);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.faq__sign::before { top: 9.5px; left: 0; width: 20px; height: 1.5px; }
.faq__sign::after  { left: 9.5px; top: 0; width: 1.5px; height: 20px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }

/* La hauteur nulle masque visuellement, mais ne retire PAS le contenu de
   l'arbre d'accessibilité : un lecteur d'écran lisait les 8 réponses à la
   suite. visibility:hidden l'en retire réellement, et le délai de transition
   la maintient visible le temps que le repli s'anime. */
.faq__a > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}
.faq__q[aria-expanded="true"] + .faq__a > div {
  visibility: visible;
  transition-delay: 0s;
}
.faq__a p {
  padding-bottom: 1.6rem;
  padding-right: 1.6rem;
  color: var(--text-mid);
  font-size: 0.98rem;
}
.faq__a p + p { padding-top: 0; margin-top: -0.8rem; }

/* Photo a droite, affichee en entier : aucun recadrage, on laisse le ratio
   natif du fichier (800x1200, portrait) determiner la hauteur. La colonne est
   resserree pour que cette hauteur reste proche de celle de la liste. */
.faq__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.faq__photo picture { display: block; }
.faq__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   12 — Appel à l'action final
   ========================================================================== */

.cta {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 15% 25%, rgba(249, 115, 22, 0.18) 0%, rgba(20, 16, 11, 0) 65%),
    radial-gradient(ellipse 55% 60% at 88% 88%, rgba(251, 191, 36, 0.1) 0%, rgba(20, 16, 11, 0) 62%);
  /* Le pied de page est posé sur la même encre que cette section, et la section
     d'appel le précède sur les quatre pages qui en ont une. Sans ce fondu, la
     lueur ci-dessus s'arrêtait net au bord bas : les deux fonds sont pourtant
     identiques, mais le saut de luminosité, sur toute la largeur, se lisait
     comme un trait tiré entre le bouton et le pied de page. Le masque éteint la
     lueur avant le raccord — même remède que .pagehero--continu, même cause. */
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
  pointer-events: none;
}
.cta__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.cta h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 1.3rem; }
.cta__points { display: grid; gap: 1rem; margin-top: 2.2rem; }
.cta__points li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; color: var(--on-dark-mid); }
.cta__points svg { flex: none; margin-top: 0.35rem; color: var(--orange); }
.cta__direct {
  display: grid;
  gap: 0.9rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}
.cta__direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--parchment);
  transition: color 0.3s var(--ease);
}
.cta__direct a:hover, .cta__direct a:focus-visible { color: var(--orange); }
.cta__direct svg { flex: none; color: var(--orange); }

/* ==========================================================================
   Formulaire (partagé accueil / page devis)
   ========================================================================== */

.form {
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  background: rgba(242, 235, 221, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
}
.field label .req { color: var(--orange); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  background: rgba(20, 16, 11, 0.35);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  color: var(--parchment);
  font-size: 0.98rem;
  font-weight: 300;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
/* 0.34 donnait 2,9:1 sur le fond sombre — illisible. 0.55 monte à 5,4:1.
   Les placeholders portent ici de vrais exemples, ils doivent se lire. */
.field input::placeholder,
.field textarea::placeholder { color: rgba(242, 235, 221, 0.55); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(20, 16, 11, 0.5);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23f97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  padding-right: 2.6rem;
}
.field select option { background: var(--espresso); color: var(--parchment); }

.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.form__consent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(242, 235, 221, 0.55);
}
.form__consent input[type="checkbox"] {
  width: 17px; height: 17px;
  margin-top: 0.2rem;
  accent-color: var(--orange);
  padding: 0;
}
.form__consent a { color: var(--orange); }

.form__submit { grid-column: 1 / -1; margin-top: 0.4rem; }
.form__note {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  /* 0.42 donnait 3,6:1 : sous le seuil AA pour une mention de réassurance
     qui fait un vrai travail de conversion. 0.58 monte à 5,7:1. */
  color: rgba(242, 235, 221, 0.58);
  text-align: center;
}

/* Message de confirmation (maquette : aucun envoi réel).
   C'est une région live (role="status") : elle DOIT rester dans l'arbre
   d'accessibilité en permanence, sinon l'insertion du message n'est jamais
   annoncée. On ne peut donc pas la masquer en display:none — vide, elle est
   simplement dépouillée de tout ce qui occupe de la place. */
.form__done {
  grid-column: 1 / -1;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: var(--r-md);
  background: rgba(249, 115, 22, 0.1);
  font-size: 0.92rem;
  color: var(--parchment);
}
.form__done:empty { padding: 0; border: 0; background: none; }

/* Echec d'envoi. Le rouge n'est pas decoratif : c'est le seul indice non
   textuel qui distingue un echec d'un succes dans un bloc identique. Le
   texte, lui, dit toujours quoi faire — reessayer, ecrire, ou appeler. */
.form__done--error {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.1);
}

/* ==========================================================================
   Garde-fou anti-débordement
   Tout enfant de grille susceptible de contenir du texte insécable, un
   tableau ou un bloc de code doit pouvoir descendre sous sa largeur de
   contenu minimal.
   ========================================================================== */

.pain__layout > *,
.geo > *,
.faq__layout > *,
.cta__layout > *,
.work > * { min-width: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .work { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .steps::before { display: none; }
}

@media (max-width: 900px) {
  .pain__layout,
  .geo,
  .faq__layout,
  .cta__layout { grid-template-columns: 1fr; }
  .pain__photo { aspect-ratio: 3 / 2; min-height: 0; }
  .faq__photo { order: -1; }
}

@media (max-width: 640px) {
  .work { grid-template-columns: 1fr; }
  /* Sans ce reset, grid-column: span 2 cree une deuxieme colonne implicite et
     ecrase les tuiles etroites. */
  .work__card--wide { grid-column: auto; }
  .steps { grid-template-columns: 1fr; text-align: left; }
  .step { text-align: left; }
  .step__bullet { margin-inline: 0; }
  .form__grid { grid-template-columns: 1fr; }
}