/* ==========================================================================
   KOWORK.MQ — FEUILLE DE STYLE DU SITE koworkfwi.fr
   --------------------------------------------------------------------------
   Fil du site vitrine (1) : étape 1, les fondations ; étape 2, l'accueil.
   Piste B « Nuit et or », régime typographique de l'appli, mot-marque M1
   [Dario — 17 oct., 14 h 00 et 14 h 18].

   Ce fichier est une SOURCE. Le paquet en ligne est un produit de
   construire-site.py ; il ne se corrige jamais à la main (mémo, 2.8).

   Règles que controle-site.py vérifie :
   - Les jetons qui portent un nom de la palette de l'appli ont la valeur du
     thème (kowork-theme_js.txt, PALETTE), au même nom passé en kebab-case.
   - Les jetons propres au site commencent par --site-.
   - Aucune couleur hors du bloc :root : tout passe par un jeton.
   - Chaque surface déclare ses rôles ; leurs contrastes sont calculés.
   - Mobile d'abord. Points de rupture : 768 px (tablette), 1100 px (ordinateur).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES — hébergées sur le site, jamais chargées chez un tiers.
   Fichiers latin de Fontsource (licence SIL OFL 1.1, licences à côté) :
   @fontsource-variable/fraunces 5.2.8 (axes graisse et taille optique),
   @fontsource/karla 5.2.8, @fontsource/ibm-plex-mono 5.2.7.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/karla-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/karla-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. JETONS
   -------------------------------------------------------------------------- */
:root {
  /* Palette de l'appli (thème, PALETTE) : même valeur, nom en kebab-case. */
  --creme: #F4EBD8;
  --carte: #FFFCF5;
  --creme-ombre: #EFE4CC;
  --creme-inactif: #E4D6B8;
  --or: #C08A2E;
  --or-clair: #CB962F;
  --or-profond: #8F6521;
  --or-voile: #F3E9D3;
  --or-pale: #C9B98A;
  --foret: #1E3B2C;
  --foret-sombre: #16301F;
  --foret-clair: #2C5240;
  --foret-texte: #C9D9CD;
  --foret-texte-eteint: #9FB5A6;
  --encre: #2B2015;
  --encre-douce: #6B5D4D;
  --encre-pale: #8F7A5C;
  --roucou: #A8451E;

  /* Propres au site. Nuit : charte des réseaux (transmission v3, §1.1),
     retenue pour le site avec la piste B ; ce n'est pas une couleur de l'appli. */
  --site-nuit: #14261C;
  --site-surlignage: rgba(192, 138, 46, 0.38);
  --site-ombre-carte: 0 10px 34px rgba(43, 32, 21, 0.10);
  --site-ombre-sombre: 0 14px 40px rgba(0, 0, 0, 0.28);

  /* Polices : les trois du régime de l'appli, avec des replis réels. */
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: "Karla", "Helvetica Neue", Arial, sans-serif;
  --police-donnee: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Échelle typographique, du téléphone à l'ordinateur. */
  --taille-h1: clamp(2.625rem, 1.75rem + 4.2vw, 5rem);
  --taille-h2: clamp(1.875rem, 1.4rem + 2.3vw, 3.125rem);
  --taille-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --taille-chapo: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --taille-texte: 1rem;
  --taille-petit: 0.875rem;
  --taille-repere: 0.75rem;

  /* Mise en page. */
  --largeur: 75rem;
  --gouttiere-g: max(20px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(20px, env(safe-area-inset-right, 0px));
  --section-y: clamp(3.25rem, 2.2rem + 5vw, 6.5rem);
  --rayon-carte: 22px;
  --rayon-bloc: 16px;
  --rayon-champ: 12px;
  --rayon-pilule: 999px;
  --cible: 44px;
  --filet-l: 120px;
  --filet-h: 6px;

  color-scheme: only light;
}

/* --------------------------------------------------------------------------
   3. SURFACES — chaque fond déclare ses rôles de couleur.
   controle-site.py calcule : texte, texte-doux, texte-repere, texte-accent,
   lien et bouton2-texte contre le fond (4,5 au moins) ; titre-accent contre
   le fond (3 au moins, grands titres seulement) ; focus contre le fond (3 au
   moins) ; bouton-texte contre bouton-fond et bouton-fond-survol (4,5) ;
   mot-marque contre le fond (4,5).
   Le trait est décoratif : il ne porte aucune information.
   -------------------------------------------------------------------------- */
.surface-nuit {
  --fond: var(--site-nuit);
  --texte: var(--creme);
  --texte-doux: var(--foret-texte);
  --texte-repere: var(--foret-texte-eteint);
  --texte-accent: var(--or);
  --titre-accent: var(--or);
  --lien: var(--creme);
  --mot-marque: var(--creme);
  --focus: var(--or);
  --bouton-fond: var(--or);
  --bouton-fond-survol: var(--or-clair);
  --bouton-texte: var(--encre);
  --bouton2-texte: var(--creme);
  --bouton2-bord: var(--creme);
  --trait: var(--foret-clair);
}
.surface-foret {
  --fond: var(--foret);
  --texte: var(--creme);
  --texte-doux: var(--foret-texte);
  --texte-repere: var(--foret-texte);
  --texte-accent: var(--creme);
  --titre-accent: var(--or);
  --lien: var(--creme);
  --mot-marque: var(--creme);
  --focus: var(--or);
  --bouton-fond: var(--or);
  --bouton-fond-survol: var(--or-clair);
  --bouton-texte: var(--encre);
  --bouton2-texte: var(--creme);
  --bouton2-bord: var(--creme);
  --trait: var(--foret-clair);
}
.surface-creme {
  --fond: var(--creme);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --texte-repere: var(--encre-douce);
  --texte-accent: var(--foret);
  --titre-accent: var(--or-profond);
  --lien: var(--foret);
  --mot-marque: var(--foret);
  --focus: var(--foret);
  --bouton-fond: var(--foret);
  --bouton-fond-survol: var(--foret-clair);
  --bouton-texte: var(--creme);
  --bouton2-texte: var(--foret);
  --bouton2-bord: var(--foret);
  --trait: var(--encre-pale);
}
.surface-carte {
  --fond: var(--carte);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --texte-repere: var(--or-profond);
  --texte-accent: var(--or-profond);
  --titre-accent: var(--or-profond);
  --lien: var(--foret);
  --mot-marque: var(--foret);
  --focus: var(--foret);
  --bouton-fond: var(--foret);
  --bouton-fond-survol: var(--foret-clair);
  --bouton-texte: var(--creme);
  --bouton2-texte: var(--foret);
  --bouton2-bord: var(--foret);
  --trait: var(--encre-pale);
}
.surface-nuit,
.surface-foret,
.surface-creme,
.surface-carte {
  background: var(--fond);
  color: var(--texte);
}

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--site-nuit);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--site-nuit);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: var(--lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement : visible dès qu'il reçoit le focus clavier. */
.lien-evitement {
  position: absolute;
  left: var(--gouttiere-g);
  top: -100px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--rayon-champ);
  background: var(--fond);
  color: var(--texte);
  font-weight: 700;
}
.lien-evitement:focus {
  top: 12px;
}

/* Conteneur : la gouttière vit ici, la couleur de bande sur la section. */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * 64px);
  margin-inline: auto;
  padding-left: var(--gouttiere-g);
  padding-right: var(--gouttiere-d);
}
.section {
  padding-block: var(--section-y);
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
.repere {
  font-family: var(--police-donnee);
  font-size: var(--taille-repere);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--texte-repere);
}
.titre-1,
.titre-2,
.titre-3 {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--texte);
  text-wrap: balance;
}
.titre-1 {
  font-size: var(--taille-h1);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.titre-2 {
  font-size: var(--taille-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.titre-3 {
  font-size: var(--taille-h3);
  line-height: 1.2;
}
.titre-accent {
  color: var(--titre-accent);
}
.filet {
  width: var(--filet-l);
  height: var(--filet-h);
  border-radius: calc(var(--filet-h) / 2);
  background: var(--or);
}
.chapo {
  max-width: 36rem;
  font-size: var(--taille-chapo);
  line-height: 1.6;
  color: var(--texte-doux);
}
.texte-doux {
  color: var(--texte-doux);
}
.texte-accent {
  color: var(--texte-accent);
  font-weight: 600;
}
.petit {
  font-size: var(--taille-petit);
}
.donnee {
  font-family: var(--police-donnee);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.surligne {
  background: linear-gradient(transparent 55%, var(--site-surlignage) 55%);
}
.pile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pile--serree {
  gap: 12px;
}
.pile > p {
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   6. BOUTONS — cibles de 44 px au moins.
   -------------------------------------------------------------------------- */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--rayon-pilule);
  border: 1.5px solid transparent;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.bouton--plein {
  background: var(--bouton-fond);
  color: var(--bouton-texte);
}
.bouton--plein:hover {
  background: var(--bouton-fond-survol);
}
.bouton--contour {
  border-color: var(--bouton2-bord);
  color: var(--bouton2-texte);
  font-weight: 600;
}
.bouton--contour:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 479.98px) {
  .boutons .bouton {
    flex: 1 1 100%;
    padding: 10px 20px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .bouton {
    transition: background-color 160ms ease;
  }
}

/* --------------------------------------------------------------------------
   7. LA MARQUE — logo intact (jamais sous 40 px), mot-marque M1.
   Sur fond sombre, le logo pose sur une pastille crème (charte, §1.3).
   -------------------------------------------------------------------------- */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--cible);
  text-decoration: none;
}
.marque__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--creme);
}
.marque__logo {
  width: 40px;
  height: 40px;
}
.mot-marque {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.4375rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--mot-marque);
}
.mot-marque__mq {
  color: var(--or);
}

/* --------------------------------------------------------------------------
   8. EN-TÊTE — téléphone : la marque et « Contact » sur une ligne, les trois
   entrées dessous. Tablette et ordinateur : tout sur une ligne.
   -------------------------------------------------------------------------- */
.en-tete {
  border-bottom: 1px solid var(--trait);
}
.en-tete__barre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "marque contact"
    "nav nav";
  align-items: center;
  gap: 10px 16px;
  padding-block: 12px;
}
.en-tete .marque {
  grid-area: marque;
}
.en-tete__nav {
  grid-area: nav;
}
.en-tete__contact {
  grid-area: contact;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
}
.nav__lien {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 10px;
  border-radius: var(--rayon-pilule);
  color: var(--texte);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__lien:hover {
  text-decoration: underline;
}
.nav__lien[aria-current="page"] {
  background: var(--foret);
}
.en-tete__contact {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 16px;
  border-radius: var(--rayon-pilule);
  border: 1.5px solid var(--or);
  color: var(--texte);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .en-tete__barre {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marque nav contact";
    padding-block: 14px;
  }
  .nav {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .nav__lien {
    padding: 0 14px;
  }
}

/* --------------------------------------------------------------------------
   9. PIED DE PAGE — plan du site par public.
   -------------------------------------------------------------------------- */
.pied {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 2rem;
}
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  margin-bottom: 36px;
}
.pied__presentation {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 22rem;
}
.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}
.pied__titre {
  margin-bottom: 8px;
}
.pied__lien {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--texte);
  font-size: 0.9375rem;
  text-decoration: none;
}
.pied__lien:hover {
  text-decoration: underline;
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  font-size: var(--taille-petit);
  color: var(--texte-doux);
}
.pied__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
@media (min-width: 768px) {
  .pied__colonnes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .pied__haut {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 48px;
  }
}

/* --------------------------------------------------------------------------
   10. FILIGRANE — le gingembre à 0,05, jamais devant le texte.
   -------------------------------------------------------------------------- */
.avec-filigrane {
  position: relative;
  overflow: hidden;
}
.avec-filigrane > .conteneur {
  position: relative;
  z-index: 1;
}
.filigrane {
  position: absolute;
  width: clamp(320px, 40vw, 560px);
  height: auto;
  color: var(--or);
  opacity: 0.05;
  pointer-events: none;
}
.filigrane--bas-gauche {
  left: -14%;
  bottom: -32%;
}
.filigrane--haut-droite {
  right: -12%;
  top: -24%;
}

/* --------------------------------------------------------------------------
   11. PAGE D'ERREUR
   -------------------------------------------------------------------------- */
.erreur {
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}
.erreur__contenu {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   12. PLANCHE DES FONDATIONS — aperçu seulement, jamais dans le paquet de
   dépôt (construire-site.py l'écarte). Montre les jetons, la typographie, les
   surfaces et la largeur active.
   -------------------------------------------------------------------------- */
.planche__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 16px;
}
.planche__bloc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--rayon-carte);
}
.planche__bloc.surface-nuit {
  box-shadow: inset 0 0 0 1px var(--trait);
}
.planche__bloc--ombre {
  box-shadow: var(--site-ombre-carte);
}
.planche__nuance {
  display: flex;
  align-items: center;
  gap: 12px;
}
.planche__pastille {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--trait);
}
.planche__pastille--nuit { background: var(--site-nuit); }
.planche__pastille--foret { background: var(--foret); }
.planche__pastille--creme { background: var(--creme); }
.planche__pastille--carte { background: var(--carte); }
.planche__pastille--or { background: var(--or); }
.planche__pastille--or-profond { background: var(--or-profond); }
.planche__pastille--encre { background: var(--encre); }
.planche__pastille--foret-texte { background: var(--foret-texte); }
.largeur-active span {
  display: none;
}
.largeur-active .largeur-active--telephone {
  display: inline;
}
@media (min-width: 768px) {
  .largeur-active .largeur-active--telephone { display: none; }
  .largeur-active .largeur-active--tablette { display: inline; }
}
@media (min-width: 1100px) {
  .largeur-active .largeur-active--tablette { display: none; }
  .largeur-active .largeur-active--ordinateur { display: inline; }
}

/* --------------------------------------------------------------------------
   13. ACCUEIL — étape 2. Une colonne au téléphone et à la tablette ; deux
   colonnes à l'ordinateur. Chaque bloc coloré porte sa propre surface.
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3.25rem, 2rem + 6vw, 7rem);
}
.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
@media (min-width: 1100px) {
  .deux-colonnes {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
  }
  .deux-colonnes--large {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
  .deux-colonnes--haut {
    align-items: start;
  }
  .deux-colonnes--contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}
@media (min-width: 480px) {
  .boutons--hero .bouton {
    min-width: 15rem;
  }
}
.lien-fort {
  font-weight: 700;
}
.insecable {
  white-space: nowrap;
}

/* Le visuel : anneaux, disque et téléphone de maquette. */
.visuel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  min-width: 0;
}
.anneaux {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  aspect-ratio: 1 / 1;
}
.anneaux__trait,
.anneaux__or,
.anneaux__disque {
  position: absolute;
  border-radius: 50%;
}
.anneaux__trait {
  inset: 0;
  border: 1px solid var(--foret-clair);
}
.anneaux__or {
  inset: 10%;
  border: 3px solid var(--or);
  opacity: 0.85;
}
.anneaux__disque {
  inset: 20.5%;
  background: var(--foret);
}
.telephone {
  position: relative;
  width: 196px;
  padding: 8px;
  border-radius: 30px;
  border: 1px solid var(--foret-clair);
  background: var(--foret-sombre);
  box-shadow: var(--site-ombre-sombre);
}
.telephone__ecran {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
  padding: 18px 12px;
  border-radius: 23px;
}
.telephone--grand {
  width: 236px;
  padding: 10px;
  border-radius: 34px;
}
.telephone--grand .telephone__ecran {
  gap: 12px;
  min-height: 330px;
  padding: 22px 14px;
  border-radius: 26px;
}
.ecran__surtitre {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.ecran__titre {
  font-family: var(--police-titre);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--texte);
}
.ecran__bloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.ecran__bloc--attente {
  border: 1px dashed var(--encre-pale);
  color: var(--texte-doux);
}
.ecran__donnee {
  font-family: var(--police-donnee);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}
.ecran__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 600;
}
.statut {
  padding: 3px 7px;
  border-radius: 6px;
  font-family: var(--police-donnee);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.statut--plein {
  background: var(--foret);
  color: var(--creme);
}
.statut--contour {
  padding: 2px 6px;
  border: 1px solid var(--or-profond);
  color: var(--or-profond);
}

/* En bref : quatre faits. */
.en-bref {
  padding-block: 26px;
}
.en-bref__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 32px;
}
@media (min-width: 768px) {
  .en-bref__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .en-bref__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.en-bref__fait {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.picto {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--texte-accent);
}

/* Cartes des atouts. */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 14px;
}
.carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 18px;
}
.carte__titre {
  font-family: var(--police-titre);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte-accent);
}

/* Comment ça marche : trois étapes, puis le dépliant des sept tâches. */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 16px;
}
.etape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border-radius: 20px;
}
.etape__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-family: var(--police-donnee);
  font-weight: 600;
}
.depliant {
  border: 1px solid var(--trait);
  border-radius: 20px;
}
.depliant__bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--cible);
  padding: 14px 22px;
  border-radius: 20px;
  color: var(--texte);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.depliant__bouton::-webkit-details-marker {
  display: none;
}
.depliant__bouton::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--police-donnee);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--texte-accent);
}
.depliant[open] > .depliant__bouton::after {
  content: "\2212";
}
.depliant__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0 28px;
  padding: 0 22px 18px;
}
.depliant__tache {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 2px 10px;
  padding-block: 12px;
  border-top: 1px solid var(--trait);
}
.depliant__numero {
  grid-row: span 2;
  font-family: var(--police-donnee);
  font-weight: 600;
  color: var(--texte-accent);
}
.depliant__libelle {
  font-weight: 700;
}
.depliant__detail {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* Le ticket perforé, signature de Kowork. Les encoches prennent la couleur
   du fond de la section : --encoche est fixé sur la liste, avant que le
   ticket ne redéclare son propre fond. */
.tickets {
  --encoche: var(--fond);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 18px;
}
.ticket {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon-carte);
  box-shadow: var(--site-ombre-sombre);
}
.ticket__tete {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 18px;
}
.ticket__perforation {
  position: relative;
  height: 3px;
  margin-inline: 18px;
  background: repeating-linear-gradient(90deg, var(--or) 0 9px, transparent 9px 17px);
}
.ticket__perforation::before,
.ticket__perforation::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--encoche);
}
.ticket__perforation::before {
  left: -31px;
}
.ticket__perforation::after {
  right: -31px;
}
.ticket__corps {
  padding: 18px 24px 24px;
}

/* À propos : le texte né du terrain, puis les deux applis. */
.terrain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 42rem;
  padding: 20px 22px;
  border-radius: var(--rayon-bloc);
  box-shadow: var(--site-ombre-carte);
}
.applis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
  gap: 14px;
  align-content: start;
}
.appli {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  border-radius: 20px;
}
.appli--contour {
  border: 1px solid var(--encre-pale);
}

/* --------------------------------------------------------------------------
   14. FORMULAIRES — construits, inactifs jusqu'à la réponse du juridique.
   -------------------------------------------------------------------------- */
.formulaire {
  padding: clamp(20px, 1rem + 1.5vw, 32px);
  border-radius: var(--rayon-carte);
}
.formulaire__champs,
.choix {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.formulaire__champs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formulaire__ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 14px;
}
.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}
.champ__saisie {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--encre-pale);
  border-radius: var(--rayon-champ);
  background: var(--carte);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 400;
}
.champ__saisie--long {
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}
.choix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choix__legende {
  margin-bottom: 6px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.choix__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--encre-pale);
  border-radius: var(--rayon-pilule);
  font-size: 0.9375rem;
  font-weight: 600;
}
.choix__option input {
  margin: 0;
  accent-color: var(--foret);
}
.formulaire__mention {
  padding: 12px 14px;
  border-radius: var(--rayon-champ);
  font-size: var(--taille-petit);
  color: var(--texte-doux);
}
.formulaire__envoyer {
  min-height: 54px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background: var(--creme-inactif);
  color: var(--encre-douce);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   15. PAGE ÉTABLISSEMENTS — étape 3 (fil du site vitrine (3)). Reprend les
   composants de l'accueil ; n'ajoute que le bouton de la maquette, les trois
   écrans et les éléments des formulaires demandés par la réponse juridique v2
   (avertissement, aide sous le champ, case facultative).
   -------------------------------------------------------------------------- */
.ecran__fort {
  font-weight: 700;
}
.ecran__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: 0 14px;
  border-radius: var(--rayon-pilule);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-size: 0.875rem;
  font-weight: 700;
}
.appareils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.appareil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--rayon-bloc);
  box-shadow: var(--site-ombre-carte);
  color: var(--texte-accent);
}
.appareil svg {
  width: 44px;
  height: 44px;
}
.formulaire__avertissement,
.champ__aide {
  font-size: var(--taille-petit);
  font-weight: 400;
  line-height: 1.5;
  color: var(--texte-doux);
}
.case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--cible);
  font-size: 0.9375rem;
  font-weight: 600;
}
.case input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--foret);
}

/* --------------------------------------------------------------------------
   16. MENTIONS LÉGALES — étape 4 (fil du site vitrine (3)). Le texte de la
   réponse juridique v2, annexe A, mot pour mot ; une colonne de lecture.
   -------------------------------------------------------------------------- */
.mentions {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 46rem;
}
.mentions__date {
  font-size: var(--taille-petit);
  color: var(--texte-doux);
}
.mentions__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
}