/* ==========================================================================
   Trameli, feuille de style unique (passe 2)
   Palette : ardoise, terre cuite, lin, gris chaud, blanc. Rien d'autre.
   Typographie : Manrope 400 / 600 / 800.
   ========================================================================== */

:root {
  --ardoise: #1F3A5F;
  --terre: #C86B3C;
  --lin: #F4F1EA;
  --gris: #6B675F;
  --blanc: #FFFFFF;
  --filet: rgba(31, 58, 95, 0.18);
  --trame: rgba(31, 58, 95, 0.05);

  --police: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --corps: 1.125rem;      /* 18 px */
  --mesure: 38em;         /* 65 à 75 caractères en Manrope */
  --rayon: 6px;

  --conteneur: 80rem;
  --marge: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --entete: 5.5rem;
}

/* --------------------------------------------------------------------------
   Transitions de page (fondu de 250 ms, ignoré par les navigateurs anciens)
   -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Fond lin avec la trame : lignes de 1 px tous les 24 px, ardoise à 5 %,
   fixée à l'écran. Les bandes blanches et ardoise la recouvrent. */
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--corps);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ardoise);
  background-color: var(--lin);
  background-image:
    linear-gradient(to right, var(--trame) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trame) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
}

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

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ardoise);
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem);
  max-width: 14em;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

p,
li {
  max-width: var(--mesure);
}

p + p {
  margin-top: 1em;
}

strong {
  font-weight: 600;
}

a {
  color: var(--ardoise);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2.5px;
}

:focus-visible {
  outline: 3px solid var(--ardoise);
  outline-offset: 3px;
}

.bande--ardoise :focus-visible {
  outline-color: var(--lin);
}

.chapeau {
  max-width: 32em;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--gris);
}

.secondaire {
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   Signature : barre longue ardoise, barre courte terre cuite.
   Sous les h1 et les h2, et sous le titre des offres.
   -------------------------------------------------------------------------- */

.signature {
  --h: 5px;
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 0.75);
  margin-top: 1.5rem;
}

.signature::before,
.signature::after {
  content: "";
  height: var(--h);
}

.signature::before {
  width: calc(var(--h) * 13);
  background: var(--ardoise);
}

.signature::after {
  width: calc(var(--h) * 4);
  background: var(--terre);
}

h1 + .signature {
  --h: 8px;
  margin-top: 2rem;
}

.bande--ardoise .signature::before {
  background: var(--lin);
}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */

.conteneur {
  width: min(100% - 2 * var(--marge), var(--conteneur));
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.bande--blanc {
  background: var(--blanc);
}

.bande--ardoise {
  background: var(--ardoise);
  color: var(--lin);
}

.bande--ardoise h1,
.bande--ardoise h2,
.bande--ardoise h3,
.bande--ardoise p,
.bande--ardoise a {
  color: var(--lin);
}

.bande--ardoise .chapeau,
.bande--ardoise .secondaire {
  color: var(--lin);
  opacity: 0.85;
}

/* Deux colonnes : titre à gauche, contenu à droite. */
.partage {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56em) {
  .partage {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 5rem;
    align-items: start;
  }
}

.centre {
  text-align: center;
}

.centre h1,
.centre h2,
.centre p {
  margin-inline: auto;
}

.centre .signature {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-block;
  font: inherit;
  font-size: 1.1875rem;   /* 19 px en ExtraBold : grand texte au sens WCAG */
  font-weight: 800;
  line-height: 1.2;
  padding: 0.85em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.bouton--principal {
  background: var(--terre);
  border-color: var(--terre);
  color: var(--blanc);
}

.bouton--principal:hover {
  background-image: linear-gradient(rgba(31, 58, 95, 0.16), rgba(31, 58, 95, 0.16));
}

.bouton--secondaire {
  background: transparent;
  border-color: var(--ardoise);
  color: var(--ardoise);
}

.bouton--secondaire:hover {
  background: var(--ardoise);
  color: var(--lin);
}

/* --------------------------------------------------------------------------
   Accès rapide au contenu
   -------------------------------------------------------------------------- */

.lien-evitement {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--ardoise);
  color: var(--lin);
  border-radius: 0 0 var(--rayon) var(--rayon);
}

.lien-evitement:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   En-tête, marque en HTML/CSS et navigation
   -------------------------------------------------------------------------- */

.entete {
  border-bottom: 1px solid var(--filet);
}

.entete__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  min-height: var(--entete);
  padding-block: 1rem;
}

/* Reprise du logo : mot-marque ExtraBold et signature en deux pièces,
   proportions du fichier SVG (barres à 0,13 em, longue 1,75 em, courte 0,55 em). */
.marque {
  display: inline-block;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--ardoise);
}

.marque__mot {
  display: block;
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.marque__signature {
  display: flex;
  gap: 0.1em;
  margin-top: 0.14em;
  font-size: 1.875rem;
}

.marque__signature::before,
.marque__signature::after {
  content: "";
  height: 0.13em;
}

.marque__signature::before {
  width: 1.75em;
  background: var(--ardoise);
}

.marque__signature::after {
  width: 0.55em;
  background: var(--terre);
}

.navigation {
  margin-left: auto;
}

.navigation ul {
  display: flex;
  gap: 2rem;
  padding: 0;
  list-style: none;
}

.navigation a {
  display: inline-block;
  padding: 0.25rem 0;
  font-weight: 600;
  color: var(--ardoise);
  text-decoration: none;
}

.navigation a:hover,
.navigation a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.menu-bouton {
  display: none;
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 2px solid var(--ardoise);
  border-radius: var(--rayon);
  color: var(--ardoise);
  cursor: pointer;
}

@media (max-width: 47.99em) {
  .js .menu-bouton {
    display: inline-block;
  }

  .navigation {
    flex-basis: 100%;
    margin-left: 0;
  }

  .js .navigation {
    display: none;
  }

  .js .navigation.est-ouvert {
    display: block;
  }

  .navigation ul {
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--filet);
  }

  .navigation li + li {
    border-top: 1px solid var(--filet);
  }

  .navigation a {
    display: block;
    padding: 0.85rem 0;
  }

  .navigation a:hover,
  .navigation a[aria-current="page"] {
    text-underline-offset: 0.3em;
  }
}

/* --------------------------------------------------------------------------
   Hero de l'accueil : ardoise pleine hauteur, titre à gauche, système à droite
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(calc(100svh - var(--entete)), 60rem);
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}

/* La trame vivante : un canvas en arrière-plan, sans interaction. */
.hero__toile {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero > .conteneur {
  position: relative;
  z-index: 1;
}

.hero__ligne {
  display: block;
}

.hero__grille {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 56em) {
  .hero__grille {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.insecable {
  white-space: nowrap;
}

/* Animation d'entrée, une seule fois : les trois lignes à 80 ms d'écart,
   puis la signature qui se trace (barre longue 260 ms, barre courte 140 ms). */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__ligne {
    opacity: 0;
    transform: translateY(0.25em);
    animation: hero-ligne 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  .js .hero__ligne:nth-child(2) { animation-delay: 80ms; }
  .js .hero__ligne:nth-child(3) { animation-delay: 160ms; }

  .js .hero h1 + .signature::before,
  .js .hero h1 + .signature::after {
    transform: scaleX(0);
    transform-origin: left center;
    animation: hero-barre 260ms ease-out 700ms forwards;
  }

  .js .hero h1 + .signature::after {
    animation-duration: 140ms;
    animation-delay: 960ms;
  }
}

@keyframes hero-ligne {
  to { opacity: 1; transform: none; }
}

@keyframes hero-barre {
  to { transform: scaleX(1); }
}

.hero .chapeau {
  margin-top: 1.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}

.hero__actions a:not(.bouton) {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   La trame : démonstration animée d'un système relié
   Tout est dimensionné en em ; la taille de police de la scène suit la
   largeur du conteneur (unités cqi), les lignes SVG partagent le même repère.
   Sans animation (mouvement réduit), l'état de base est l'état final.
   -------------------------------------------------------------------------- */

.trame {
  container-type: inline-size;
}

.trame-scene {
  position: relative;
  width: 40em;
  height: 36em;
  font-size: 12px;
  font-size: clamp(9.5px, 2.5cqi, 15px);
  line-height: 1.35;
  color: var(--ardoise);
}

.trame-lignes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trame-lignes--etroit {
  display: none;
}

.trame-ligne {
  fill: none;
  stroke: var(--lin);
  stroke-width: 0.15;   /* unités du repère, soit environ 2 px */
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 1;
}

.trame-carte {
  position: absolute;
  padding: 1.1em 1.2em;
  background: var(--blanc);
  color: var(--ardoise);
}

.trame-carte--formulaire { left: 0; top: 0; width: 18em; height: 14em; }
.trame-carte--agenda { left: 22em; top: 1.5em; width: 18em; height: 13em; }
.trame-carte--mails { left: 22em; top: 19em; width: 18em; height: 11.5em; }
.trame-carte--rappel { left: 0; top: 21em; width: 18em; height: 11em; }

.trame-carte p,
.trame-carte li {
  max-width: none;
}

/* Les cartes sont blanches : leur texte reste ardoise, même sur la bande ardoise. */
.trame-scene p,
.trame-scene li {
  color: var(--ardoise);
}

.trame-scene .trame-carte__titre,
.trame-scene .trame-champ__etiquette,
.trame-scene .trame-agenda__heure,
.trame-scene .trame-mail__meta,
.trame-scene .trame-message__etat {
  color: var(--gris);
}

.trame-carte__titre {
  margin-bottom: 0.8em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--gris);
}

/* Formulaire */
.trame-champ {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin-bottom: 0.7em;
}

.trame-champ__etiquette {
  font-size: 0.75em;
  color: var(--gris);
}

.trame-champ__valeur {
  display: flex;
  align-items: center;
  height: 2.1em;
  padding: 0 0.6em;
  border: 1px solid var(--filet);
  border-radius: 4px;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
}

.trame-saisie {
  display: inline-block;
  max-width: 8em;
  padding-right: 1px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.25;
  border-right: 2px solid transparent;
  opacity: 1;
}

.trame-bouton {
  position: absolute;
  right: 1.2em;
  bottom: 1.1em;
  padding: 0.55em 1em;
  font-size: 0.85em;
  font-weight: 800;
  line-height: 1.2;
  border: 1.5px solid var(--terre);
  border-radius: 4px;
  background: var(--terre);
  color: var(--blanc);
}

/* Agenda */
.trame-agenda,
.trame-mails {
  padding: 0;
  list-style: none;
  font-size: 0.85em;
}

.trame-agenda li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.2em 0;
  border-top: 1px solid var(--filet);
}

.trame-agenda__heure {
  width: 4.2em;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.trame-agenda__creneau {
  flex: 1;
  min-height: 1.5em;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trame-agenda__creneau--pris {
  background: var(--lin);
  color: var(--gris);
}

.trame-agenda__creneau--nouveau {
  background: var(--ardoise);
  color: var(--lin);
  font-weight: 600;
  opacity: 1;
  transform: none;
}

/* Boîte de réception */
.trame-mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  height: 2.3em;
  overflow: hidden;
  border-top: 1px solid var(--filet);
}

.trame-mail:first-child {
  border-top: 0;
}

.trame-mail__objet {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trame-mail__meta {
  flex-shrink: 0;
  color: var(--gris);
}

.trame-mail--nouveau {
  font-weight: 600;
  opacity: 1;
  transform: none;
}

.trame-mail--nouveau .trame-mail__objet::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--terre);
  vertical-align: 0.1em;
}

/* Rappel */
.trame-message {
  max-width: 92%;
  padding: 0.7em 0.9em;
  border-radius: 6px 6px 6px 2px;
  background: var(--lin);
  font-size: 0.9em;
  opacity: 1;
  transform: none;
}

.trame-message__etat {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.45em;
  font-size: 0.8em;
  color: var(--gris);
}

.trame-coche {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: var(--terre);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 1;
}

.trame-legende {
  max-width: 34em;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  text-align: left;
}

/* Disposition étroite : les quatre cartes empilées. */
@media (max-width: 55.99em) {
  .trame-scene {
    width: 24em;
    height: 52em;
    font-size: clamp(11px, 4.16cqi, 14px);
  }

  .trame-carte--formulaire { width: 24em; height: 12.5em; }
  .trame-carte--agenda { left: 0; top: 15em; width: 24em; height: 13em; }
  .trame-carte--mails { left: 0; top: 30.5em; width: 24em; height: 11.5em; }
  .trame-carte--rappel { left: 0; top: 44.5em; width: 24em; height: 7.5em; }

  .trame-lignes--large { display: none; }
  .trame-lignes--etroit { display: block; }
}

/* Chronologie sur 12 s, en pourcentages :
   saisie du nom 4 à 14, du créneau 17 à 27, bouton 29, ligne 1 31 à 38,
   agenda 38 à 42, ligne 2 43 à 50, mail 50 à 54, ligne 3 55 à 62,
   rappel 62 à 66, coche 65 à 68, ligne 4 69 à 76, tenue jusqu'à 90,
   fondu 90 à 95, remise à zéro à 95. */

.trame-saisie--nom {
  animation: trame-nom 12s linear infinite, trame-curseur-nom 12s linear infinite;
}

.trame-saisie--creneau {
  animation: trame-creneau 12s linear infinite, trame-curseur-creneau 12s linear infinite;
}

.trame-bouton { animation: trame-bouton 12s linear infinite; }
.trame-ligne--1 { animation: trame-ligne-1 12s linear infinite; }
.trame-ligne--2 { animation: trame-ligne-2 12s linear infinite; }
.trame-ligne--3 { animation: trame-ligne-3 12s linear infinite; }
.trame-ligne--4 { animation: trame-ligne-4 12s linear infinite; }
.trame-agenda__creneau--nouveau { animation: trame-agenda-nouveau 12s linear infinite; }
.trame-mail--nouveau { animation: trame-mail-nouveau 12s linear infinite; }
.trame-message { animation: trame-rappel 12s linear infinite; }
.trame-coche { animation: trame-coche 12s linear infinite; }

.trame--pause .trame-scene * {
  animation-play-state: paused;
}

@keyframes trame-nom {
  0%, 4% { max-width: 0; opacity: 1; animation-timing-function: steps(12, end); }
  14%, 90% { max-width: 6em; opacity: 1; }
  94.9% { max-width: 6em; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { max-width: 0; opacity: 1; }
}

@keyframes trame-curseur-nom {
  0%, 3% { border-right-color: transparent; }
  3.2%, 15% { border-right-color: var(--ardoise); }
  15.2%, 100% { border-right-color: transparent; }
}

@keyframes trame-creneau {
  0%, 17% { max-width: 0; opacity: 1; animation-timing-function: steps(13, end); }
  27%, 90% { max-width: 6em; opacity: 1; }
  94.9% { max-width: 6em; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { max-width: 0; opacity: 1; }
}

@keyframes trame-curseur-creneau {
  0%, 16.5% { border-right-color: transparent; }
  16.7%, 28% { border-right-color: var(--ardoise); }
  28.2%, 100% { border-right-color: transparent; }
}

@keyframes trame-bouton {
  0%, 29% {
    background-color: var(--blanc);
    border-color: var(--ardoise);
    color: var(--ardoise);
    transform: none;
    animation-timing-function: step-end;
  }
  29.1% {
    background-color: var(--terre);
    border-color: var(--terre);
    color: var(--blanc);
    transform: scale(0.95);
    animation-timing-function: ease-out;
  }
  31%, 90% {
    background-color: var(--terre);
    border-color: var(--terre);
    color: var(--blanc);
    transform: none;
  }
  95%, 100% {
    background-color: var(--blanc);
    border-color: var(--ardoise);
    color: var(--ardoise);
    transform: none;
  }
}

@keyframes trame-ligne-1 {
  0%, 31% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: ease-in-out; }
  38%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94.9% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { stroke-dashoffset: 1; opacity: 1; }
}

@keyframes trame-ligne-2 {
  0%, 43% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: ease-in-out; }
  50%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94.9% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { stroke-dashoffset: 1; opacity: 1; }
}

@keyframes trame-ligne-3 {
  0%, 55% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: ease-in-out; }
  62%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94.9% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { stroke-dashoffset: 1; opacity: 1; }
}

@keyframes trame-ligne-4 {
  0%, 69% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: ease-in-out; }
  76%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94.9% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { stroke-dashoffset: 1; opacity: 1; }
}

@keyframes trame-agenda-nouveau {
  0%, 38% { opacity: 0; transform: translateY(0.4em) scale(0.97); animation-timing-function: ease-out; }
  42%, 90% { opacity: 1; transform: none; }
  94.9% { opacity: 0; transform: none; animation-timing-function: step-end; }
  95%, 100% { opacity: 0; transform: translateY(0.4em) scale(0.97); }
}

@keyframes trame-mail-nouveau {
  0%, 50% { height: 0; opacity: 0; transform: translateX(-0.6em); animation-timing-function: ease-out; }
  54%, 90% { height: 2.3em; opacity: 1; transform: none; }
  94.9% { height: 2.3em; opacity: 0; transform: none; animation-timing-function: step-end; }
  95%, 100% { height: 0; opacity: 0; transform: translateX(-0.6em); }
}

@keyframes trame-rappel {
  0%, 62% { opacity: 0; transform: translateY(0.4em); animation-timing-function: ease-out; }
  66%, 90% { opacity: 1; transform: none; }
  94.9% { opacity: 0; transform: none; animation-timing-function: step-end; }
  95%, 100% { opacity: 0; transform: translateY(0.4em); }
}

@keyframes trame-coche {
  0%, 65% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: ease-out; }
  68%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94.9% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: step-end; }
  95%, 100% { stroke-dashoffset: 1; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Offres : trois colonnes, réactives au survol (fond ardoise, signature qui
   se déplace), prix en gros
   -------------------------------------------------------------------------- */

.offres {
  display: grid;
  margin-top: 3.5rem;
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  color: var(--ardoise);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.offre .signature {
  --h: 4px;
  margin-top: 1rem;
  transition: transform 200ms ease;
}

.offre .signature::before {
  transition: background-color 200ms ease;
}

.offre p {
  margin-top: 1.25rem;
}

.offre .offre__prix {
  margin-top: auto;
  padding-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--gris);
  transition: color 200ms ease;
}

.offre__prix strong {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ardoise);
  transition: color 200ms ease;
}

.offre:hover,
.offre:focus-visible {
  background: var(--ardoise);
  color: var(--lin);
  outline-offset: -3px;
}

.offre:hover h3,
.offre:hover .offre__prix,
.offre:hover .offre__prix strong,
.offre:focus-visible h3,
.offre:focus-visible .offre__prix,
.offre:focus-visible .offre__prix strong {
  color: var(--lin);
}

.offre:hover .signature,
.offre:focus-visible .signature {
  transform: translateX(8px);
}

.offre:hover .signature::before,
.offre:focus-visible .signature::before {
  background: var(--lin);
}

.offre:focus-visible {
  outline-color: var(--lin);
}

@media (max-width: 55.99em) {
  .offre {
    padding-inline: 1.5rem;
    margin-inline: -1.5rem;
  }

  .offre + .offre {
    border-top: 1px solid var(--filet);
  }
}

@media (min-width: 56em) {
  .offres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Filet vertical limité à la hauteur du contenu, hors marges internes. */
  .offre + .offre::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    bottom: 2.25rem;
    left: 0;
    width: 1px;
    background: var(--filet);
  }

  .offre:first-child {
    margin-left: -2rem;
  }

  .offre:last-child {
    margin-right: -2rem;
  }
}

/* --------------------------------------------------------------------------
   Méthode : trois points en texte courant
   -------------------------------------------------------------------------- */

.methode {
  display: grid;
  gap: 2.25rem;
}

.methode p {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Réalisation : cadre de navigateur en perspective
   -------------------------------------------------------------------------- */

.realisation {
  align-items: center;
}

.realisation__texte p {
  margin-top: 1.5rem;
}

.realisation__meta {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gris);
}

.realisation__lien {
  display: inline-block;
  margin-top: 1.75rem;
  font-weight: 600;
}

.navigateur {
  display: block;
  border: 1px solid var(--filet);
  background: var(--blanc);
  transform: perspective(1400px) rotateY(-10deg) rotateX(3deg);
  transform-origin: 40% 50%;
  transition: transform 500ms ease;
}

.realisation:hover .navigateur,
.navigateur:focus-visible {
  transform: perspective(1400px) rotateY(0) rotateX(0);
}

.navigateur__barre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--filet);
  background: var(--lin);
}

.navigateur__barre span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--gris);
  opacity: 0.4;
}

.navigateur img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 750;
  object-fit: cover;
  background: var(--lin);
}

/* --------------------------------------------------------------------------
   Appel final
   -------------------------------------------------------------------------- */

.appel p {
  margin-top: 1.5rem;
}

.appel .bouton {
  margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  padding-block: 3rem;
  border-top: 1px solid var(--filet);
  font-size: 0.9375rem;
  color: var(--gris);
}

.pied__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem 4rem;
}

.pied__marque {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.pied__marque svg {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  list-style: none;
}

.pied a {
  color: var(--ardoise);
}

.pied__contact {
  margin-left: auto;
}

@media (max-width: 47.99em) {
  .pied__interieur {
    flex-direction: column;
    gap: 1.5rem;
  }

  .pied__contact {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : pas d'animation, la démonstration reste à l'état final,
   le cadre reste incliné, les transitions sont instantanées.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   Pages intérieures
   ========================================================================== */

/* En-tête de page : titre, signature, chapeau, sur lin */
.en-tete-page {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.en-tete-page h1 {
  max-width: 11em;
}

.en-tete-page .chapeau {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Services : sélecteur d'offre (trois onglets, résumé à droite)
   -------------------------------------------------------------------------- */

.no-js .selecteur {
  display: none;
}

.selecteur {
  display: grid;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--blanc);
}

@media (min-width: 56em) {
  .selecteur {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 3rem;
  }
}

.selecteur__onglets {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.selecteur__onglet {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--ardoise);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.selecteur__onglet:hover {
  background: var(--lin);
}

.selecteur__onglet[aria-selected="true"] {
  color: var(--lin);
  background: var(--ardoise);
  border-left-color: var(--terre);
}

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

.selecteur__onglet[aria-selected="true"]:focus-visible {
  outline-color: var(--lin);
}

.selecteur__resume {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 100%;
  padding-left: clamp(0rem, 2vw, 1.5rem);
}

.selecteur__resume[hidden] {
  display: none;
}

.selecteur__resume h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.selecteur__resume ul {
  padding-left: 1.1em;
}

.selecteur__resume li + li {
  margin-top: 0.35rem;
}

.selecteur__delai {
  color: var(--gris);
}

.selecteur__prix {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--gris);
}

.selecteur__prix strong {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ardoise);
}

.selecteur__prix strong.change {
  animation: prix-change 300ms ease-out;
}

@keyframes prix-change {
  from { opacity: 0; transform: translateY(0.2em); }
  to { opacity: 1; transform: none; }
}

.selecteur__lien {
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Sections détaillées des offres */
.offre-detail {
  padding-block: var(--section);
  border-top: 1px solid var(--filet);
}

.offre-detail:first-of-type {
  border-top: 0;
}

.offre-detail h2 {
  max-width: 12em;
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
}

.offre-detail__pour {
  margin-top: 1.5rem;
}

.offre-detail__contenu h3 {
  margin-bottom: 1rem;
}

.offre-detail__contenu ul {
  padding-left: 1.2em;
}

.offre-detail__contenu li + li {
  margin-top: 0.5rem;
}

.offre-detail__contenu h3 + p,
.offre-detail__contenu ul + h3 {
  margin-top: 0;
}

.offre-detail__contenu ul + h3,
.offre-detail__contenu p + h3 {
  margin-top: 2rem;
}

.offre-detail__prix {
  margin-top: 2.25rem;
  font-size: 0.9375rem;
  color: var(--gris);
}

.offre-detail__prix strong {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ardoise);
}

/* Maintenance */
.maintenance {
  align-items: start;
}

.maintenance__prix {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

.maintenance__prix strong {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lin);
}

.maintenance ul {
  margin-top: 1rem;
  padding-left: 1.2em;
}

.maintenance li + li {
  margin-top: 0.5rem;
}

.mention {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}

/* --------------------------------------------------------------------------
   Réalisations : cas client, avant et après révélés au défilement
   -------------------------------------------------------------------------- */

.cas-client + .cas-client {
  margin-top: var(--section);
  padding-top: var(--section);
  border-top: 1px solid var(--filet);
}

.cas-client__entete {
  margin-bottom: 3rem;
}

.cas-client__meta {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gris);
}

.cas-client__etapes {
  display: grid;
  gap: 2.5rem;
}

.cas-client__etapes h3 {
  margin-bottom: 0.75rem;
}

.cas-client__etapes ul {
  padding-left: 1.2em;
}

.cas-client__etapes li + li {
  margin-top: 0.4rem;
}

.navigateur--droit {
  transform: none;
  margin-block: 3rem;
}

.realisation:hover .navigateur--droit {
  transform: none;
}

.avant-apres {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 48em) {
  .avant-apres {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .avant-apres__colonne + .avant-apres__colonne {
    border-left: 1px solid var(--filet);
  }
}

.avant-apres__colonne {
  padding: 2.25rem 2rem;
  background: var(--blanc);
}

.avant-apres__colonne--apres {
  background: var(--ardoise);
  color: var(--lin);
}

.avant-apres__colonne--apres h3,
.avant-apres__colonne--apres p,
.avant-apres__colonne--apres li {
  color: var(--lin);
}

.avant-apres__colonne h3 {
  margin-bottom: 1.25rem;
}

.avant-apres__colonne ul {
  padding-left: 1.2em;
}

.avant-apres__colonne li + li {
  margin-top: 0.6rem;
}

@media (prefers-reduced-motion: no-preference) {
  .js .avant-apres__colonne {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js .avant-apres__colonne--apres {
    transition-delay: 180ms;
  }

  .js .avant-apres.est-visible .avant-apres__colonne {
    opacity: 1;
    transform: none;
  }
}

.placeholder {
  color: var(--terre);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   À propos : portrait typographique
   -------------------------------------------------------------------------- */

.portrait {
  display: grid;
  align-content: center;
  min-height: min(calc(100svh - var(--entete)), 56rem);
  padding-block: clamp(3rem, 7vw, 6rem);
}

.portrait h1 {
  max-width: none;
  font-size: clamp(2.75rem, 1rem + 6.4vw, 7.5rem);
}

.portrait__ligne {
  display: block;
}

.portrait__phrase {
  margin-top: 2.5rem;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  color: var(--gris);
}

.a-propos__bloc + .a-propos__bloc {
  margin-top: 3rem;
}

.a-propos__bloc h3 {
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Contact : formulaire (Web3Forms), filet terre cuite au focus, état « Envoyé »
   -------------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: 1.5rem;
  max-width: 38rem;
}

.champ {
  display: grid;
  gap: 0.5rem;
}

.champ label {
  font-weight: 600;
}

.champ__aide {
  font-size: 0.9375rem;
  color: var(--gris);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--ardoise);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ardoise) 50%), linear-gradient(135deg, var(--ardoise) 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--terre);
  box-shadow: 0 0 0 1px var(--terre);
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: none;
}

/* Piège à robots : présent dans le HTML, hors écran pour les visiteurs. */
.piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.formulaire__etat {
  margin: 0;
  font-weight: 600;
}

.formulaire__etat[hidden] {
  display: none;
}

.formulaire__etat--erreur {
  color: var(--terre);
}

.formulaire__envoye {
  display: grid;
  gap: 1rem;
  padding: 2.25rem 2rem;
  background: var(--ardoise);
  color: var(--lin);
}

.formulaire__envoye h2,
.formulaire__envoye p {
  color: var(--lin);
}

.formulaire__envoye[hidden] {
  display: none;
}

.section--formulaire {
  padding-top: 1rem;
}

.contact__aparte {
  margin-top: 2.5rem;
  color: var(--gris);
}

@media (min-width: 56em) {
  .contact {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 5rem;
    align-items: start;
  }

  .contact__aparte {
    margin-top: 0;
    padding-top: 0.5rem;
  }
}