/* © 2026 TJ GROUP. Tous droits réservés. */

/* ==========================================================================
   RÉGLAGES : police, couleurs, tailles de texte, espacements.
   Le site est toujours sur fond clair, quel que soit le thème de l'appareil.
   ========================================================================== */
/* Police Jost hébergée sur le site (licence : assets/fonts/OFL.txt) */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-variable.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Identité « Chantier » (novembre 2026) : fond béton clair, encre,
     accent terre cuite. Contrastes vérifiés (AA) sur --fond. */
  --fond:            #EFEDE8;   /* béton clair                                */
  --fond-2:          #F7F5F0;   /* cartes, champs de formulaire               */
  --ligne:           #D6D1C7;   /* filets de séparation                       */
  --texte:           #1B1A18;   /* encre : texte important                    */
  --gris-clair:      #4A4640;   /* texte secondaire, titre géant              */
  --gris:            #5E5950;   /* texte courant                              */
  --etiquette:       #E2DED5;   /* fond des étiquettes                        */
  --etiquette-texte: #3A3732;

  /* Couleur de marque : terre cuite (aplats, boutons) et sa version foncée
     pour le texte et les liens (lisible sur le fond béton). */
  --accent:          #C4501F;
  --accent-texte:    #9E3F18;
  --sur-accent:      #FFFFFF;   /* texte posé sur un aplat terre cuite        */

  /* Fonds « studio » des sites témoins : clair → moyen → ombre */
  --sauge-1: #8E9672;  --sauge-2: #5B6246;  --sauge-3: #2E3224;   /* Go Jardins        */
  --acier-1: #9A8577;  --acier-2: #5E4C44;  --acier-3: #2B2320;   /* L'Atelier du Métal */
  --lumiere: rgba(255, 255, 255, 0.16);   /* rayons de lumière sur le fond studio */
  --ombre:   rgba(27, 26, 24, 0.28);         /* ombre portée des appareils          */

  /* Typographie : Jost, police unique de la charte TJ Group */
  --police: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --t-etiquette: 0.8125rem;                                  /* 13 px */
  --t-courant:   1rem;                                       /* 16 px */
  --t-projet:    clamp(1.15rem, 1rem + 0.6vw, 1.6rem);       /* noms de projets */
  --t-chapo:     clamp(1.2rem, 1rem + 0.9vw, 1.75rem);       /* intro, à propos */
  --t-section:   clamp(2rem, 1.2rem + 3.5vw, 4.5rem);        /* titres de section */

  /* Espacements */
  --gouttiere: clamp(16px, 2.4vw, 36px);
  /* Gouttières gauche et droite calculées SÉPARÉMENT : sur certains téléphones
     (iPhone Duo et iPhone tenu à l'horizontale), une zone réservée (caméra,
     Dynamic Island) n'existe que d'un côté ; le contenu reste hors de ces zones. */
  --gouttiere-g: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  --gouttiere-d: max(var(--gouttiere), env(safe-area-inset-right, 0px));
  --entre-projets: clamp(64px, 9vw, 140px);

  /* Vitesse de défilement des captures dans les écrans (pixels par seconde) */
  --vitesse-defilement: 70;
}

/* © 2026 TJ GROUP. Tous droits réservés. */

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--fond); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--gris);
  font-family: var(--police);
  font-size: var(--t-courant);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h2, h3 { font-weight: 400; line-height: 1.1; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; }
.chiffres { font-variant-numeric: tabular-nums; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: var(--gouttiere-g); top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 50; background: var(--texte); color: var(--fond); padding: 8px 12px; }

/* Conteneur unique : porte la gouttière latérale de toute la page */
.page { padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }

/* Bande de la couleur du fond sous la barre d'état de l'iPhone (heure,
   batterie) : sans elle, le contenu, en défilant, resterait visible derrière
   l'heure, au-dessus de la navigation collée. Hauteur nulle sur les appareils
   sans zone réservée en haut. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--fond);
  z-index: 30;
  pointer-events: none;
}

/* Libellé de section entre parenthèses : « ( À propos ) » */
.libelle { font-size: var(--t-etiquette); color: var(--gris-clair); letter-spacing: 0.02em; white-space: nowrap; }

/* Étiquettes grises */
.etiquettes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.etiquettes li {
  background: var(--etiquette);
  color: var(--etiquette-texte);
  font-size: var(--t-etiquette);
  line-height: 1;
  padding: 6px 10px 5px;
  border-radius: 2px;
  white-space: nowrap;
}
/* L'étiquette « offre » porte le filet terre cuite de la marque */
.etiquettes .etiquette--offre { box-shadow: inset 2px 0 0 var(--accent-texte); }

/* ==========================================================================
   2. TITRE GÉANT + NAVIGATION
   Le titre est ajusté à la largeur exacte de la page par le script
   (fonction ajusterTitres). La taille en vw sert d'attente avant la police.
   ========================================================================== */
.marque-geante {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: none;
  font-size: 15.5vw;
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--gris-clair);
  white-space: nowrap;
  /* Le J de Jost descend sous la ligne de base : on lui réserve sa place
     en bas, pour qu'il ne soit jamais coupé ni recouvert par le menu. */
  padding-block: 0.06em 0.24em;
}
.marque-geante__tj { font-weight: 600; color: var(--texte); }
/* Le filet vertical terre cuite : signature du lockup TJ Group */
.marque-geante__filet {
  display: inline-block;
  width: 0.055em;
  height: 0.7em;
  margin-inline: 0.13em 0.11em;
  background: var(--accent);
  border-radius: 0.02em;
}
.titre-zone { overflow: hidden; }   /* sécurité : jamais de débordement latéral */
.titre-zone > a { display: block; color: inherit; }   /* titre cliquable (page Tarifs) */

/* Navigation étalée sur toute la largeur, collée en haut au défilement */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px 12px;
  background: var(--fond);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  color: var(--gris-clair);
}
.nav a { transition: color .2s; }
.nav a:hover { color: var(--texte); }
/* Lien « Vidéo » : l'offre mise en avant, en terre cuite sur toutes les pages */
.nav a.nav__vedette { color: var(--accent-texte); font-weight: 500; }
.nav a.nav__vedette:hover { color: var(--texte); }
/* Page en cours (ex. « Tarifs » sur la page des tarifs) */
.nav a[aria-current="page"] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent-texte); }
@media (max-width: 380px) { .nav { gap: 6px; font-size: 0.9rem; } }
/* Filet violet de progression de lecture (largeur pilotée par le script) */
.nav::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--progression, 0));
}

/* ==========================================================================
   3. INTRO
   ========================================================================== */
.intro {
  display: grid;
  gap: 28px;
  /* Espace au-dessus de l'intro : proportionnel à la hauteur de l'écran, mais
     plafonné par la largeur, pour éviter un grand vide sur les écrans étroits
     et très hauts (écran de l'iPhone Duo partagé entre deux applications côte à côte). */
  padding-block: clamp(96px, min(26vh, 60vw), 320px) clamp(56px, 9vh, 110px);
}

/* Photo du poste de travail en fond de l'intro, sur toute la largeur de
   l'écran (on annule la gouttière de .page). Le texte reste dans la gouttière.
   La section prend la hauteur de la photo (proportions 3:2) pour la montrer
   en entier sur ordinateur, sans dépasser la hauteur de l'écran. */
.intro {
  position: relative;
  isolation: isolate;               /* la photo reste derrière le texte */
  margin-left: calc(-1 * var(--gouttiere-g));
  margin-right: calc(-1 * var(--gouttiere-d));
  padding-left: var(--gouttiere-g);
  padding-right: var(--gouttiere-d);
  min-height: clamp(520px, 66.7vw, 92svh);
  align-content: end;               /* texte en bas à gauche, sur la partie sombre */
}
.intro__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  /* Discrétion de la photo : 1 = pleine, 0 = invisible. Réglage à ajuster ici. */
  opacity: 0.55;
}
/* Voile clair à gauche et en bas : le texte reste lisible sur la photo */
.intro__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(239, 237, 232, .82) 0%, rgba(239, 237, 232, .45) 38%, rgba(239, 237, 232, 0) 60%),
    linear-gradient(0deg, rgba(239, 237, 232, .9) 0%, rgba(239, 237, 232, 0) 45%);
}
/* Téléphone : la photo n'est plus en fond mais affichée EN ENTIER, sur toute
   la largeur de l'écran (proportions 3:2, sans recadrage), juste au-dessus
   du texte. Ses bords sont déjà fondus dans le noir : le voile est inutile. */
@media (max-width: 700px) {
  .intro {
    min-height: 0;
    padding-top: 12px;
  }
  .intro__photo {
    position: relative;
    inset: auto;
    z-index: auto;
    aspect-ratio: 3 / 2;
    margin-left: calc(-1 * var(--gouttiere-g));
    margin-right: calc(-1 * var(--gouttiere-d));
  }
  .intro__photo::after { content: none; }
  /* Même opacité que sur ordinateur (0,55, réglée plus haut sur .intro__photo img). */

  /* Cadrage serré : la photo est agrandie de 23 % pour que l'oreille touche
     le bord gauche et que l'écran du Mac déborde légèrement à droite.
     Repères mesurés sur la photo : bord de l'oreille à 13 % de la largeur,
     coupe à droite à 94,2 %, coupe en haut à 6 %.
       largeur  = 1 / (0,942 − 0,13)  ≈ 123,2 %
       gauche   = −0,13  × 123,2 %    ≈ −16 %
       haut     = −0,06  × 123,2 %    ≈ −7,4 %
     Les coupes haute et basse sont adoucies par un fondu (mask-image). */
  .intro__photo img {
    position: absolute;
    width: 123.2%;
    height: 123.2%;
    max-width: none;
    left: -16%;
    top: -7.4%;
  }
  .intro__photo {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
  }
}

/* Vrai titre de la page (H1) : court, avec les mots que les clients tapent
   dans Google. Discret, au-dessus du texte d'introduction. */
.intro__titre {
  max-width: 34ch;
  font-size: var(--t-etiquette);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-texte);
  text-wrap: balance;
}

.intro__texte {
  max-width: 30ch;
  font-size: var(--t-chapo);
  font-weight: 400;
  line-height: 1.32;
  color: var(--gris-clair);
}
.intro__texte strong { font-weight: 500; color: var(--texte); }
.intro .etiquettes { justify-content: flex-start; }

/* ==========================================================================
   3 bis. VITRINE — haut de l'accueil : un téléphone joue un reel de chantier.
   Ordinateur : texte à gauche, téléphone à droite. Téléphone : texte, puis
   le téléphone centré, puis les boutons restent sous le texte.
   ========================================================================== */
.vitrine {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding-block: clamp(24px, 5vh, 64px) clamp(48px, 8vh, 96px);
}
/* Pas de halo : identité « Chantier » (ombre décalée sur le téléphone) */
.vitrine::before {
  display: none;
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%; top: 50%;
  width: min(70vw, 820px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(83, 74, 183, .38), rgba(83, 74, 183, .1) 55%, transparent 75%);
  pointer-events: none;
}
.vitrine__texte { display: grid; gap: 24px; align-content: center; }
.vitrine__accroche {
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--texte);
  text-wrap: balance;
  max-width: 13ch;
}
.vitrine__chapo { max-width: 38ch; font-size: var(--t-chapo); line-height: 1.35; color: var(--gris-clair); }
.vitrine__chapo strong { font-weight: 500; color: var(--texte); }
.vitrine__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 8px; }

.vitrine__media { justify-self: center; display: grid; justify-items: center; gap: 30px; margin: 0; }  /* écart : le téléphone penché ne doit pas toucher la légende */
.vitrine__telephone {
  position: relative;
  width: clamp(230px, 24vw, 340px);
  padding: 10px;
  border-radius: 44px;
  background: var(--texte);
  box-shadow: 6px 8px 0 var(--accent);   /* ombre décalée terre cuite, fine */
  transform: rotate(3deg);
}
.vitrine__video {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 34px;
  background: var(--fond-2);
}
/* Voyant « REC » : la marque d'un tournage, en terre cuite */
.vitrine__rec {
  position: absolute; top: 26px; left: 26px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px; border-radius: 2px;
  background: rgba(27, 26, 24, .62);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; color: #FFFFFF;
}
.vitrine__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-texte); animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.vitrine__legende {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-clair);
  padding-left: 10px; box-shadow: inset 2px 0 0 var(--accent-texte);
}
@media (prefers-reduced-motion: reduce) {
  .vitrine__rec i { animation: none; }
  .vitrine__telephone { transform: none; }
}
@media (max-width: 820px) {
  /* Ordre sur téléphone : titre, accroche, reel, puis texte et boutons */
  .vitrine { grid-template-columns: 1fr; padding-top: 40px; gap: 24px; }
  .vitrine__texte { display: contents; }
  .vitrine__media { order: 3; margin-block: 12px; }
  .vitrine__chapo { order: 4; }
  .vitrine__actions { order: 5; }
  .vitrine::before { right: 50%; top: 72%; transform: translate(50%, -50%); width: 120vw; }
  .vitrine__telephone { width: min(62vw, 300px); }
}

/* Ancien texte d'introduction, sous la vitrine */
.agence { display: grid; gap: 24px; padding-block: clamp(40px, 6vw, 72px); }

/* ==========================================================================
   4. RÉALISATIONS — un « studio » par site témoin
   Le fond est un décor dessiné (dégradé + rayons de lumière + sol), pas une
   photo. Les dimensions des appareils sont en % du studio : la composition
   garde ses proportions à toutes les tailles.
   ========================================================================== */
/* La section n'a pas de marge haute : en arrivant par le menu, on laisse
   la place de la navigation collée pour que le libellé reste visible. */
#realisations { scroll-margin-top: 80px; }
.projets { display: grid; gap: var(--entre-projets); }

.projet { display: grid; gap: 12px; }
.projet__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.projet__nom { flex: none; font-size: var(--t-projet); color: var(--gris-clair); white-space: nowrap; }
/* Petits téléphones : étiquettes resserrées pour tenir sur la ligne du nom */
@media (max-width: 420px) {
  .projet__tete { gap: 10px; }
  .projet__tete .etiquettes li { padding-inline: 7px; }
}
@media (max-width: 380px) {
  .projet__tete .etiquettes li { font-size: 0.75rem; padding-inline: 6px; }
}
.projet__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.95rem;
}
.projet__pied p { max-width: 62ch; min-width: 0; }
.projet__pied span { color: var(--gris-clair); white-space: nowrap; }

/* ---- Le studio (fond) ---- */
.studio {
  --c1: var(--sauge-1); --c2: var(--sauge-2); --c3: var(--sauge-3);
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  background:
    /* sol : légère cassure à 76 % de la hauteur, comme une table de prise de vue */
    linear-gradient(to bottom, transparent 76%, rgba(0,0,0,.22) 76.15%, rgba(0,0,0,.08) 100%),
    /* mur éclairé depuis le haut à gauche */
    radial-gradient(130% 110% at 22% 8%, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
}
.studio--acier { --c1: var(--acier-1); --c2: var(--acier-2); --c3: var(--acier-3); }

/* Rayons de lumière d'une fenêtre, en biais, qui s'effacent vers la droite */
.studio::before {
  content: "";
  position: absolute;
  inset: -20% -10% -20% -30%;
  background: repeating-linear-gradient(118deg,
    var(--lumiere) 0 5cqw, transparent 5cqw 11cqw);
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%);
          mask-image: linear-gradient(100deg, #000 10%, transparent 62%);
  filter: blur(1.4cqw);
  pointer-events: none;
}

/* ---- Composition des deux appareils ---- */
.composition { position: absolute; inset: 0; }

.navigateur {
  position: absolute;
  left: 9%; top: 9%;
  width: 70%;
  border-radius: 1cqw;
  overflow: hidden;
  background: var(--fond-2);
  box-shadow: 0 3cqw 6cqw -1cqw var(--ombre), 0 0.4cqw 1cqw rgba(0,0,0,.25);
}
.navigateur__barre {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  height: 3.2cqw;
  padding-inline: 1.2cqw;
  font-size: clamp(9px, 1.1cqw, 13px);
  color: var(--gris);
}
.navigateur__barre i { width: 0.75cqw; height: 0.75cqw; border-radius: 50%; background: var(--ligne); }
.navigateur__barre span {
  margin-inline: auto;
  padding: 0.25cqw 1.6cqw;
  border-radius: 0.5cqw;
  background: var(--fond);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.telephone {
  position: absolute;
  right: 8%; bottom: 7%;
  width: 17%;
  padding: 0.7cqw;
  border-radius: 3cqw;
  background: var(--texte);
  box-shadow: 0 3cqw 5cqw -1cqw var(--ombre), inset 0 0 0 0.15cqw rgba(255, 255, 255, .08);
}
.telephone .ecran { border-radius: 2.4cqw; }

/* ---- Écrans : la capture complète défile lentement de haut en bas ---- */
.ecran { position: relative; overflow: hidden; background: var(--fond-2); }
.ecran--ordinateur { aspect-ratio: 16 / 10; }
.ecran--telephone  { aspect-ratio: 9 / 19.5; }
.ecran img {
  width: 100%;
  height: auto;
  max-width: none;
  animation: defilement var(--duree, 30s) ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.ecran.en-lecture img { animation-play-state: running; }
@keyframes defilement {
  0%, 6%    { transform: translateY(0); }
  94%, 100% { transform: translateY(calc(-1 * var(--course, 0px))); }
}

/* Composition fixe : pas d'effet de zoom au défilement */

/* Téléphone : studio plus haut, appareils plus grands */
@media (max-width: 700px) {
  .studio { aspect-ratio: 4 / 5; }
  .navigateur { left: 6%; top: 7%; width: 88%; border-radius: 2cqw; }
  .navigateur__barre { height: 6cqw; gap: 1.2cqw; padding-inline: 2.4cqw; font-size: 12px; }
  .navigateur__barre i { width: 1.4cqw; height: 1.4cqw; }
  .telephone { right: 6%; bottom: 5%; width: 38%; padding: 1.4cqw; border-radius: 6cqw; }
  .telephone .ecran { border-radius: 4.8cqw; }
  .studio::before { filter: blur(2.5cqw); }
}

/* ==========================================================================
   5. BANDEAU DÉFILANT (métiers et services)
   ========================================================================== */
.bandeau {
  margin-top: var(--entre-projets);
  margin-left: calc(-1 * var(--gouttiere-g));
  margin-right: calc(-1 * var(--gouttiere-d));
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--ligne);
  overflow: hidden;
}
.bandeau__piste {
  display: flex;
  width: max-content;
  animation: bandeau 38s linear infinite;
}
.bandeau ul { display: flex; flex-shrink: 0; }
.bandeau li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: clamp(24px, 3.5vw, 48px);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 500;
  color: var(--gris-clair);
  white-space: nowrap;
}
.bandeau li::before { content: ""; width: 3px; height: 1.1em; background: var(--accent); }
@keyframes bandeau { to { transform: translateX(-50%); } }

/* ==========================================================================
   6. SECTIONS TEXTE (à propos, offres, méthode, contact)
   ========================================================================== */
.section { padding-block: clamp(64px, 9vw, 140px); border-bottom: 1px solid var(--ligne); }


.titre-section {
  font-size: var(--t-section);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--texte);
  max-width: 16ch;
}
.section__tete { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__tete p { max-width: 52ch; }

/* ---- Engagements (sous « À propos ») ---- */
.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 28px 32px;   /* l'espace au-dessus vient de .section__tete */
}
.engagements li { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ligne); align-content: start; }
.engagements h3 { font-size: 1.1rem; color: var(--texte); font-weight: 500; }

/* ---- Offres : même ligne que les projets (nom à gauche, étiquettes à droite) ---- */
.offres > li {
  display: grid;
  gap: 10px;
  padding-block: 22px;
  border-top: 1px solid var(--ligne);
}
.offres > li:last-child { border-bottom: 1px solid var(--ligne); }
.offre__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.offre__nom { display: flex; align-items: baseline; gap: 14px; font-size: var(--t-projet); color: var(--texte); min-width: 0; }
.offre__nom .chiffres { font-size: var(--t-etiquette); color: var(--accent-texte); }
.offres > li > p { max-width: 64ch; padding-left: calc(var(--t-etiquette) + 22px); }
.offres__note { margin-top: 28px; font-size: 0.95rem; }

/* ---- Offre vedette : création de contenu, en grande carte ---- */
.vedette {
  position: relative;
  display: grid; gap: 32px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 4px;
  background: var(--fond-2);
  box-shadow: inset 0 0 0 1px var(--ligne), inset 4px 0 0 var(--accent);
}
.vedette .bouton { justify-self: start; }
.vedette__tete { display: grid; gap: 14px; max-width: 60ch; }
.vedette__badge {
  justify-self: start; padding: 4px 10px; border-radius: 2px;
  background: var(--accent); color: var(--sur-accent);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.vedette__nom { font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); font-weight: 500; line-height: 1.08; color: var(--texte); }
.vedette__nom a:hover { color: var(--accent-texte); }
.vedette__tete p { color: var(--gris-clair); font-size: 1.05rem; }
.vedette__prix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px 24px; }
.vedette__prix li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.vedette__formule { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-texte); }
.vedette__montant { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 500; color: var(--texte); line-height: 1.1; }
.vedette__montant small { font-size: max(0.36em, 0.75rem); font-weight: 400; color: var(--gris-clair); margin-left: 6px; }
.vedette__detail { font-size: 0.9rem; color: var(--gris-clair); }
.vedette__note { margin-top: -16px; font-size: 0.8125rem; color: var(--gris-clair); }

/* ---- Autres offres : liste compacte sous la vedette ---- */
.autres__titre { margin-top: clamp(40px, 6vw, 64px); font-size: var(--t-etiquette); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-clair); }
.autres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 32px; margin-top: 12px; }
.autres li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 12px; border-top: 1px solid var(--ligne); font-size: 0.95rem; }
.autres a { color: var(--texte); }
.autres a:hover { color: var(--accent-texte); }
.autres span { font-size: 0.8125rem; color: var(--gris-clair); text-align: right; }

@media (max-width: 560px) {
  .offre__tete { flex-direction: column; gap: 10px; }
  .offre__tete .etiquettes { justify-content: flex-start; }
  .offres > li > p { padding-left: 0; }
}

/* ---- Méthode : 6 étapes, dans l'ordre ---- */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 32px;
}
.etapes li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px 0; padding-block: 18px 22px; border-top: 1px solid var(--ligne); }
.etapes .chiffres { color: var(--accent-texte); font-size: var(--t-etiquette); padding-top: 0.35em; grid-row: span 2; }
.etapes h3 { font-size: 1.15rem; color: var(--texte); font-weight: 500; }

/* ---- FAQ : questions dépliables (balises <details>, sans script) ---- */
.faq { display: grid; max-width: 72ch; }
.faq details { border-top: 1px solid var(--ligne); }
.faq details:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--accent-texte);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 4px; }
.faq h3 { font-size: var(--t-projet); color: var(--texte); font-weight: 500; }
.faq details p { max-width: 64ch; padding-bottom: 22px; }

/* ---- Contact ---- */
.contact { display: grid; gap: clamp(40px, 6vw, 80px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.coordonnees { display: grid; gap: 12px; margin-top: 28px; }
.coordonnees div { display: flex; gap: 16px; align-items: baseline; }
.coordonnees .libelle { min-width: 7.5em; }
.coordonnees span:last-child { color: var(--gris-clair); }

.formulaire { display: grid; gap: 18px; align-content: start; }
.formulaire__ligne { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label { font-size: var(--t-etiquette); color: var(--gris-clair); }
.champ label span { color: var(--gris); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 12px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ligne);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font-size: 1.05rem;
}
.champ select { background: var(--fond); }
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--accent-texte); }
.champ.en-erreur input { border-bottom-color: #B3261E; }
.piege { position: absolute; left: -9999px; }

.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border: 0; border-radius: 2px;
  background: var(--accent); color: var(--sur-accent);
  font-weight: 500; cursor: pointer;
  transition: background .2s, color .2s;
}
.bouton::before { content: ""; width: 2px; height: 1em; background: var(--sur-accent); }
.bouton:hover { background: var(--texte); color: var(--fond); }
.bouton:hover::before { background: var(--accent); }
.formulaire__message { font-size: 0.95rem; color: var(--accent-texte); min-height: 1.5em; }

/* ==========================================================================
   7. PIED DE PAGE — le nom géant revient, en clôture
   ========================================================================== */
/* En bas : place pour l'encoche WhatsApp et la barre d'accueil des iPhone */
.pied { padding-block: clamp(56px, 8vw, 120px) calc(88px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 28px; }
.pied__haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.pied__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--gris-clair); }
.pied__nav a:hover { color: var(--texte); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t-etiquette); padding-top: 18px; border-top: 1px solid var(--ligne); }
.pied .marque-geante { color: var(--etiquette); }
.pied .marque-geante__tj { color: var(--etiquette-texte); }

/* Lockup compact (pied de page) : TJ | filet | Digital + baseline */
.lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--texte); }
.lockup__tj { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.lockup__filet { width: 2px; align-self: stretch; background: var(--accent); }
.lockup__nom { display: grid; line-height: 1.15; font-weight: 500; font-size: 1.05rem; }
.lockup__nom small { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; color: var(--gris); }

/* ==========================================================================
   8. PAGE TARIFS (tarifs.html)
   Chaque tarif est une ligne : à gauche le nom, les étiquettes, la
   description et la liste de ce qui est inclus ; à droite le prix.
   ========================================================================== */

/* Lien fléché (« Voir la grille tarifaire → ») */
.lien-fleche { display: inline-flex; gap: 8px; color: var(--texte); border-bottom: 1px solid var(--accent-texte); padding-bottom: 2px; }
.lien-fleche:hover { color: var(--accent-texte); }

/* En-tête de la page : sommaire en étiquettes cliquables */
.sommaire { justify-content: flex-start; }
.sommaire a { display: block; }
.sommaire li:has(a:hover) { background: var(--accent); color: var(--texte); }

.tarifs > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 40px;
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--ligne);
}
@media (min-width: 820px) {
  .tarifs > li { grid-template-columns: minmax(0, 1fr) minmax(14rem, auto); align-items: start; }
}
.tarif__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.tarif__nom { font-size: var(--t-projet); color: var(--texte); font-weight: 500; }
.tarif__corps .etiquettes { justify-content: flex-start; }
.tarif__corps > p { max-width: 58ch; }

/* Ce qui est inclus : puces en forme de filet terre cuite */
.inclus { display: grid; gap: 6px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 760px; }
.inclus li { display: flex; gap: 10px; align-items: baseline; color: var(--gris-clair); font-size: 0.95rem; }
.inclus li::before { content: ""; flex: none; width: 2px; height: 0.85em; background: var(--accent-texte); transform: translateY(1px); }

/* Prix : grand chiffre, unité en petit */
.prix { display: grid; gap: 4px; justify-items: start; }
@media (min-width: 820px) { .prix { justify-items: end; text-align: right; } }
.prix__montant {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--texte);
  white-space: nowrap;
}
.prix__montant small { font-size: max(0.36em, 0.75rem); font-weight: 400; letter-spacing: 0; color: var(--gris); margin-left: 0.3em; }
.prix__plus { font-size: 1.05rem; color: var(--gris-clair); white-space: nowrap; }
.prix__note { font-size: var(--t-etiquette); color: var(--gris); max-width: 22rem; }

/* Mensualités : tableau compact, volontairement plus discret que la grille */
.mensualites { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mensualites { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.table-defilante { overflow-x: auto; }
.table-mensualites { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-mensualites th, .table-mensualites td { padding: 12px 12px 12px 0; text-align: left; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.table-mensualites th { font-size: var(--t-etiquette); font-weight: 400; color: var(--gris); }
.table-mensualites td { color: var(--gris-clair); }
.table-mensualites td:first-child { color: var(--texte); }
.table-mensualites td.nombre, .table-mensualites th.nombre { text-align: right; }

/* Appel final vers le formulaire de contact */
.appel { display: grid; gap: 24px; justify-items: start; }

/* ==========================================================================
   8 bis. PAGES DE SERVICE (une page par service : site, fiche Google…)
   Elles réutilisent les blocs de la page Tarifs (tarifs, inclus, prix),
   les engagements et la FAQ de l'accueil.
   ========================================================================== */
/* Fil d'Ariane au-dessus du titre : Accueil / Service */
.fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-etiquette); color: var(--gris); }
.fil-ariane a { color: var(--gris-clair); border-bottom: 1px solid var(--accent-texte); }
.fil-ariane [aria-current] { color: var(--gris-clair); }
/* Noms des offres de l'accueil devenus des liens vers leur page */
.offre__nom a::after { content: " →"; color: var(--accent-texte); }   /* signale le lien vers la page du service */
.offre__nom a:hover { color: var(--accent-texte); }
/* Liens vers les autres services */
.services-liens { gap: 10px; }
/* Illustration propre à chaque service : sous le texte sur téléphone,
   à droite du titre sur ordinateur. */
.illustration { margin: 8px 0 0; display: grid; gap: 10px; }
.illustration img, .illustration__svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.illustration figcaption { font-size: var(--t-etiquette); color: var(--gris); }
@media (min-width: 900px) {
  .intro--illustree {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: auto auto auto 1fr;   /* le texte reste groupé en haut, même à côté d'une image haute */
    column-gap: clamp(40px, 6vw, 96px);
    align-content: center;
    align-items: start;
    min-height: 0;
    padding-top: clamp(40px, 6vh, 80px);
  }
  .intro--illustree > :not(.illustration) { grid-column: 1; }
  .intro--illustree .illustration { grid-column: 2; grid-row: 1 / span 4; margin: 0; max-width: 460px; justify-self: end; }
}
/* Pied de page : ligne « ( Services ) » sous le plan du site */
.pied__services { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; color: var(--gris-clair); }
.pied__services a:hover, .pied__services [aria-current] { color: var(--texte); }

/* ==========================================================================
   9. MENTIONS LÉGALES (mentions-legales.html) et note sous le formulaire
   ========================================================================== */
.formulaire__rgpd { font-size: var(--t-etiquette); color: var(--gris); }
.formulaire__rgpd a, .mentions a { color: var(--texte); border-bottom: 1px solid var(--accent-texte); }

.mentions { display: grid; gap: clamp(36px, 5vw, 60px); max-width: 880px; }
.mentions__bloc { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.mentions__bloc h2 { font-size: var(--t-projet); font-weight: 500; color: var(--texte); }
.mentions p { max-width: 68ch; color: var(--gris-clair); }
.mentions dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 28px; margin: 0; }
@media (min-width: 700px) { .mentions dl { grid-template-columns: 13rem minmax(0, 1fr); } }
.mentions dt { font-size: var(--t-etiquette); color: var(--gris); padding-top: 0.25em; }
.mentions dd { margin: 0 0 12px; color: var(--gris-clair); min-width: 0; }

/* Élément encore à renseigner avant la mise en ligne (bien visible exprès) */
.a-completer { color: var(--accent-texte); border: 1px dashed var(--accent-texte); border-radius: 2px; padding: 0 6px; }

/* ==========================================================================
   TARIFS — 4 offres : tuiles en haut, puis une section par offre
   (titre, phrase, prix, bouton) et le détail dans un bloc dépliable.
   ========================================================================== */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 8px; }
.tuiles a {
  display: grid; gap: 6px; height: 100%;
  padding: 20px 22px 22px;
  background: var(--fond-2);
  box-shadow: inset 0 0 0 1px var(--ligne);
  border-radius: 4px;
  transition: box-shadow .2s, transform .2s;
}
.tuiles a:hover { box-shadow: inset 0 0 0 1px var(--accent-texte); transform: translateY(-2px); }
.tuile__num { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent-texte); }
.tuile__nom { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 500; line-height: 1.15; color: var(--texte); }
.tuile__prix { font-size: 0.875rem; color: var(--gris-clair); }

.pilier { border-top: 1px solid var(--ligne); }
.pilier__tete { position: relative; display: grid; gap: 16px; justify-items: start; }
.pilier__numero {
  position: absolute; right: 0; top: -0.1em;
  font-size: clamp(4rem, 2rem + 8vw, 9rem); font-weight: 500; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px #C9C3B7;
  pointer-events: none;
}
.pilier__titre { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; color: var(--texte); max-width: 14ch; }
.pilier__phrase { max-width: 46ch; font-size: var(--t-chapo); line-height: 1.35; color: var(--gris-clair); }
.pilier__prix .prix__montant { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.pilier__ou { font-size: 0.95rem; color: var(--gris-clair); margin-top: 4px; }
.pilier__note { max-width: 64ch; color: var(--gris-clair); margin-bottom: 24px; }

.pilier__detail { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.pilier__detail summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 18px; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 500; color: var(--texte);
}
.pilier__detail summary::-webkit-details-marker { display: none; }
.pilier__detail summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--accent-texte); transition: transform .2s; }
.pilier__detail[open] summary::after { transform: rotate(45deg); }
.pilier__detail summary:hover { color: var(--accent-texte); }
.pilier__detail summary:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 4px; }
.pilier__contenu { padding-bottom: clamp(28px, 4vw, 48px); }
.pilier__contenu .titre-sous-section { margin-top: clamp(36px, 5vw, 56px); }
@media (prefers-reduced-motion: reduce) { .tuiles a, .pilier__detail summary::after { transition: none; } }

/* ==========================================================================
   10. ENCOCHE WHATSAPP — bouton fixe en bas à droite, sur toutes les pages
   ========================================================================== */
.encoche-whatsapp {
  position: fixed;
  right: var(--gouttiere-d);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: var(--fond-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--accent);          /* filet terre cuite de la marque */
  color: var(--texte);
  font-size: var(--t-courant);
  text-decoration: none;
  box-shadow: 0 10px 28px var(--ombre);
  transition: border-color 0.2s, transform 0.2s;
}
.encoche-whatsapp:hover { border-color: var(--accent-texte); transform: translateY(-2px); }
.encoche-whatsapp:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; }
.encoche-whatsapp__icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--accent-texte);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* ==========================================================================
   10 bis. EXEMPLES DE SITES (exemples-de-sites.html) — un client, trois
   niveaux côte à côte : Landing, Pro, Performance. Aussi les liens vers
   chaque version sous les projets de l'accueil.
   ========================================================================== */
/* Texte lu par les lecteurs d'écran seulement (ex. « nouvel onglet ») */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.versions { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 56px); }
@media (min-width: 1000px) { .versions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

.version { display: grid; align-content: start; gap: 18px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.version__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 16px; }
.version__nom { font-size: var(--t-projet); font-weight: 500; color: var(--texte); }
.version > p { color: var(--gris-clair); }
.version .inclus { grid-template-columns: minmax(0, 1fr); }
.version .lien-fleche { justify-self: start; }

.version__apercu { display: block; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.version__apercu img { display: block; width: 100%; height: auto; }
.version__apercu:hover { border-color: var(--accent-texte); transform: translateY(-3px); }
.version__apercu:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; }

/* Version encore en préparation : bloc hachuré à la place de la capture */
.version__vide {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--ligne);
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, var(--fond-2) 0 12px, var(--fond) 12px 24px);
  color: var(--gris);
  font-size: var(--t-etiquette);
}
.version--a-venir .version__nom { color: var(--gris-clair); }

/* Accueil : liens vers chaque version, sous la description d'un projet */
.projet__versions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.projet__versions .libelle { color: var(--gris); }

/* ==========================================================================
   11. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bandeau__piste, .ecran img, .composition { animation: none !important; }
  .encoche-whatsapp { transition: none; }
}

/* Offre SEO : mise en évidence (offre principale, revenu récurrent) */
.section--seo, .section--nouveau { border-left: 2px solid var(--accent-texte); padding-left: clamp(16px, 3vw, 32px); }
.tarif--vedette { box-shadow: inset 2px 0 0 var(--accent-texte); padding-left: 16px; }
.titre-sous-section { margin-top: clamp(28px, 4vw, 44px); font-size: var(--t-projet); color: var(--texte); font-weight: 500; }
.offre--vedette { box-shadow: inset 2px 0 0 var(--accent-texte); padding-left: 16px; }

/* Bandeau « Nouveau » de l'accueil : étiquettes alignées à gauche, sous le texte */
.section--nouveau .etiquettes { justify-content: flex-start; margin-top: 24px; }