/* ==========================================================================
   Composants : ne lisent que des tokens sémantiques (--text, --accent...)
   pour fonctionner tels quels sur fond clair, .theme-dark ou .theme-teal.
   ========================================================================== */

/* ---------------------------------------------------------------- Bouton */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bg-hover: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.125rem 0.6875rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn .icon {
  width: 1rem;
  height: 1rem;
}

/* Variante compacte (header) */
.btn--sm {
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Flèche animée à l'état de base (pas au survol) : une impulsion
   discrète toutes les 3s, qui invite au clic sans clignoter. */
@media (prefers-reduced-motion: no-preference) {
  .btn__arrow {
    animation: arrow-nudge 3s var(--ease-in-out) infinite;
  }
}

@keyframes arrow-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  72% { transform: translateX(5px); }
  80% { transform: translateX(0); }
  87% { transform: translateX(3px); }
  93% { transform: translateX(0); }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--heading);
  --btn-bg-hover: var(--surface-tint);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  box-shadow: none;
}

.btn--block {
  width: 100%;
}

/* Le libellé long du CTA doit tenir sur une ligne ; sous 380px il
   peut passer à la ligne proprement plutôt que déborder. */
@media (max-width: 21em) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}

/* Lien texte avec flèche */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-accent);
  text-decoration: none;
}

.link-arrow .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* ----------------------------------------------------- Surtitre / en-tête */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Surtitre précédé d'un filet (repris de l'ancien site) */
.eyebrow--line::before {
  content: "";
  width: 3.5rem;
  height: 1px;
  margin-right: var(--space-2);
  background: currentColor;
}

.eyebrow .smile {
  width: 1.5rem;
  height: auto;
  color: var(--deco);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: var(--space-7);
}

/* Le surtitre colle au titre qu'il introduit (8px au lieu de 16px) */
.section-head > .eyebrow {
  margin-bottom: calc(-1 * var(--space-2));
}

.hero__copy > .eyebrow {
  margin-bottom: calc(-1 * var(--space-3));
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section-head p:not(.eyebrow) {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- Logo */
.logo {
  display: inline-block;
  line-height: 0;
}

.logo img {
  width: 9.5rem;
  height: auto;
}

/* Header et méga-menus : voir header.css */

/* Barre CTA mobile collante, affichée une fois le hero dépassé */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-header);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgb(243 246 248 / 0.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgb(24 56 88 / 0.08);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.sticky-cta.is-visible {
  transform: none;
}

@media (min-width: 48em) {
  .sticky-cta { display: none; }
}

/* ------------------------------------------------------ Signal de confiance */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  padding: 0;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.trust-item .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--text-accent);
}

/* ----------------------------------------------------------- Prix d'appel */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  line-height: 1;
  color: var(--heading);
}

.price__from {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.price__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.price__unit {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* ------------------------------------------------------ Carte (service) */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.card:has(.card__link:hover) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--text-accent);
}

.card__icon .icon {
  width: 1.625rem;
  height: 1.625rem;
}

.card__title {
  font-size: var(--fs-h4);
}

.card__text {
  color: var(--text-muted);
}

.card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* Toute la carte est cliquable via le lien principal (pseudo-élément) */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__link:focus-visible {
  outline: none;
}

.card:has(.card__link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- Étape */
.step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.step__num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--heading);
  background: var(--bg);
}

.step__title {
  font-size: var(--fs-h4);
}

.step__text {
  color: var(--text-muted);
}

/* ------------------------------------------------------ Pilules (choix) */
.pill-group {
  border: 0;
  padding: 0;
  min-width: 0;
}

.pill-group legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: 700;
  color: var(--heading);
}

.pill-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill {
  position: relative;
  display: inline-flex;
}

.pill__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.pill__body {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.875rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.pill__body .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--teal-ink);
}

.pill__check {
  display: none;
}

.pill__input:hover + .pill__body {
  border-color: var(--teal-ink);
  background: var(--teal-tint);
}

.pill__input:active + .pill__body {
  transform: scale(0.97);
}

.pill__input:checked + .pill__body {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.pill__input:checked + .pill__body .icon {
  color: var(--teal);
}

.pill__input:checked + .pill__body .pill__check {
  display: block;
}

.pill__input:focus-visible + .pill__body {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- Champs */
.field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  font-weight: 700;
  color: var(--navy);
}

.field__optional {
  font-weight: 400;
  color: var(--slate);
}

.field__control {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-field);
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  color: var(--navy);
  font-size: 1rem; /* 16px mini : pas de zoom iOS */
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field__control::placeholder {
  color: var(--slate);
  opacity: 1;
}

.field__control:hover {
  border-color: var(--navy);
}

.field__control:focus-visible {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 4px rgb(39 122 104 / 0.22);
}

.field__help {
  font-size: var(--fs-sm);
  color: var(--slate);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--error);
}

.field__error:empty {
  display: none;
}

.field__error .icon {
  width: 1rem;
  height: 1rem;
}

.field__control[aria-invalid="true"] {
  border-color: var(--error);
}

.field__control[data-valid="true"] {
  border-color: var(--teal-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23277A68'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
}

.pill-group[aria-invalid="true"] .pill__body {
  border-color: var(--error);
}

/* Champ piège anti-spam : hors écran, jamais visible ni atteignable au clavier */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Case de consentement */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--slate);
}

.consent input {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.0625rem;
  accent-color: var(--navy);
  cursor: pointer;
}

/* ---------------------------------------------------------- Accordéon */
.accordion {
  display: grid;
  gap: var(--space-3);
}

.accordion__item {
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.accordion__heading {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--heading);
  border-radius: var(--radius-card);
}

.accordion__sign {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--text-accent);
  transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.accordion__sign .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.accordion__trigger[aria-expanded="true"] .accordion__sign {
  transform: rotate(180deg);
  background: var(--accent);
  color: var(--on-accent);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__panel p {
  padding: 0 var(--space-6) var(--space-6);
  max-width: var(--measure);
  color: var(--text-muted);
}

.js .accordion__panel[data-collapsed] {
  grid-template-rows: 0fr;
  visibility: hidden;
}

/* ---------------------------------------------------------- Avis client */
.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.review__stars {
  display: flex;
  gap: 2px;
  color: var(--amber);
}

.review__stars .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.review__text {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--heading);
}

.review__author {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.review__author strong {
  display: block;
  color: var(--heading);
}

/* ----------------------------------------------------------- Carrousel */
.carousel {
  display: grid;
  gap: var(--space-5);
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 26rem);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-3);
  list-style: none;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.carousel__track:focus-visible {
  outline-offset: -3px;
}

.carousel__slide {
  scroll-snap-align: start;
}

.carousel__controls {
  display: flex;
  gap: var(--space-2);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: var(--heading);
  background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}

.icon-btn:hover {
  background: var(--surface-tint);
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.project {
  display: grid;
  gap: var(--space-3);
}

.project__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--teal-tint);
}

.project__media picture {
  display: block;
  height: 100%;
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__title {
  font-size: var(--fs-h4);
}

.project__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ------------------------------------------------------ Chip (commune) */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
}

.chip .icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-accent);
}

/* Pastille cliquable (villes) */
.chip--link {
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.chip--link:hover {
  background: var(--navy);
  color: var(--white);
}

/* --------------------------------------------------- Chiffre clé (figure) */
.figure-stat {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.figure-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-figure);
  font-weight: 700;
  line-height: 1;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.figure-stat__label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* ------------------------------------------ Écran de confirmation (form) */
.confirm {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.confirm .smile {
  width: 7rem;
  color: var(--teal);
}

.confirm__delay {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--teal-tint);
  color: var(--navy);
  font-weight: 700;
  line-height: 1;
}

.confirm__delay .icon {
  color: var(--teal-ink);
}

/* ======================================================================
   Motifs de marque
   ====================================================================== */

/* Le sourire : <svg class="smile"><use href="sprite.svg#smile"/></svg>
   Couleur = currentColor, donc pilotée par --deco ou le contexte. */
.smile {
  display: block;
  height: auto;
  aspect-ratio: 104.43 / 28.77;
  fill: currentColor;
}

/* 1. Grand et plein, en accent de section */
.smile-hero {
  position: absolute;
  z-index: -1;
  color: var(--deco);
  pointer-events: none;
}

/* 2. Éclaté : petits sourires dispersés.
   Positionnés par --x, --y, --r (rotation), --s (largeur). */
.smile-scatter {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.smile-scatter .smile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 3rem);
  transform: rotate(var(--r, 0deg));
  color: var(--deco);
  opacity: var(--o, 0.5);
}

/* 3. En creux blanc léger, sur fond sombre */
.theme-dark .smile-hero,
.theme-dark .smile-scatter .smile {
  color: var(--white);
  opacity: var(--deco-opacity-dark);
}

/* Filigrane topographique : mask-image pour rester recolorable */
.has-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--deco);
  opacity: var(--deco-opacity);
  -webkit-mask: url("../brand/motif-topo.svg") center / cover no-repeat;
  mask: url("../brand/motif-topo.svg") center / cover no-repeat;
  pointer-events: none;
}

.theme-dark.has-topo::before {
  opacity: 0.08;
}

/* ======================================================================
   Transition entre pages : voile bleu foncé + logo animé
   Le logo est en SVG dans la page (généré par tools/build_pages.py) :
   lettres (.pt-l), sourire (.pt-smile) et « CONFORT » (.pt-confort)
   s'animent séparément.
   - html.pt-leave : sortie (le voile monte, le logo s'écrit, le sourire se dessine)
   - html.pt-enter : page suivante, voile en place, le sourire sourit
   - html.pt-reveal : le voile glisse vers le haut et découvre la page
   Jamais au premier chargement, jamais en mouvement réduit.
   ====================================================================== */
.pt {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--ink);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}

/* Filigrane topographique très léger */
.pt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  opacity: 0.05;
  -webkit-mask: url("../brand/motif-topo.svg") center / cover no-repeat;
  mask: url("../brand/motif-topo.svg") center / cover no-repeat;
}

.pt__logo {
  display: block;
  width: min(70vw, 18rem);
  height: auto;
  overflow: visible;
}

.pt-l,
.pt-confort {
  opacity: 0;
  transform: translateY(8px);
  transform-box: fill-box;
}

.pt-smile {
  transform-box: fill-box;
  transform-origin: 50% 0;
  clip-path: inset(0 100% 0 0);
}

/* ---- Sortie */
html.pt-leave .pt {
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: transform 450ms cubic-bezier(0.76, 0, 0.24, 1);
}

html.pt-leave .pt-l {
  animation: pt-rise 320ms calc(200ms + var(--i) * 55ms) var(--ease-out) forwards;
}

html.pt-leave .pt-smile {
  animation:
    pt-draw 440ms 470ms cubic-bezier(0.65, 0, 0.35, 1) forwards,
    pt-grin 1.2s 950ms var(--ease-in-out) infinite;
}

html.pt-leave .pt-confort {
  animation: pt-rise 320ms 560ms var(--ease-out) forwards;
}

/* ---- Entrée : voile en place, logo complet, le sourire sourit */
html.pt-enter .pt {
  visibility: visible;
  transform: none;
  /* filet de sécurité : le voile part seul si le JS ne répond pas */
  animation: pt-auto-out 520ms 1.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

html.pt-enter .pt-l,
html.pt-enter .pt-confort { opacity: 1; transform: none; }

html.pt-enter .pt-smile {
  clip-path: inset(0);
  animation: pt-grin 1.2s var(--ease-in-out) infinite;
}

html.pt-enter.pt-reveal .pt {
  animation: none;
  transform: translateY(-100%);
  transition: transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
}

html.pt-enter.pt-reveal .pt__logo {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 250ms var(--ease-out), transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
}

@keyframes pt-rise { to { opacity: 1; transform: none; } }
@keyframes pt-draw { to { clip-path: inset(0); } }
@keyframes pt-grin {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.22); }
}
@keyframes pt-auto-out { to { transform: translateY(-100%); visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
}