/* =========================================================================
   WebModerne — Offres de conception de logo
   Feuille de style unique. Aucune dépendance externe.
   ========================================================================= */

/* ---------- Polices locales (sous-ensemble latin, voir assets/fonts) ------ */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-regular-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-medium-subset.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-bold-subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Repli métriquement ajusté : limite le décalage de mise en page pendant
   le FOUT autorisé par font-display: swap. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  font-weight: 400 700;
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

/* ---------- Jetons de conception ----------------------------------------- */

:root {
  /* Palette */
  --ink: #0D1B2A;
  --accent: #C4261D;
  --accent-dark: #9E1E16;
  --slate: #5A6472;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --rule: #E2E5EA;

  /* Extension de la palette du cahier des charges : une déclinaison sombre.
     L'encre sert de fond de bande (accroche, rappel d'action) ; l'ardoise
     #5A6472 n'y est jamais posée — elle est remplacée par une ardoise claire
     dont le contraste sur l'encre profonde est de 8,7:1. */
  --ink-deep: #0A1523;
  --on-dark: #FFFFFF;
  --on-dark-muted: #A8B4C4;
  --rule-dark: rgba(255, 255, 255, 0.14);
  --accent-light: #E8534A; /* rouge éclairci, réservé aux tracés sur fond sombre */

  /* Échelle typographique — valeurs mobiles (mobile-first).
     Toute taille utilisée dans ce fichier provient de ces jetons. */
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-price: 36px;
  --fs-cad: 14px;
  --fs-body: 16px;
  --fs-item: 15px;
  --fs-secondary: 14px;
  --fs-button: 16px;
  --fs-label: 13px;
  --fs-footer: 14px;

  /* Interlettrage des grandes tailles (>= 32 px) */
  --tracking-display: -0.02em;
  --tracking-h2: 0;

  /* Rythme vertical */
  --space-section: 56px;
  --shell: 1160px;
  --gutter: 20px;

  /* Mesure des blocs de prose.
     L'unité « ch » vaut l'avance du glyphe « 0 », soit ~0,60 em dans Inter,
     alors qu'un caractère moyen de texte français en occupe ~0,47 em. Une
     boîte de 65ch accueille donc ~95 caractères réels — au-delà de la
     fourchette de 60 à 75 visée. La valeur ci-dessous est calibrée par
     mesure du rendu pour que les lignes tombent effectivement dans cette
     fourchette. */
  --measure: 50ch;

  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --fs-price: 40px;
    --fs-body: 17px;
    --fs-secondary: 15px;
    --tracking-h2: -0.02em; /* H2 atteint 32 px en desktop */
    --space-section: 96px;
    --gutter: 32px;
  }
}

/* ---------- Réinitialisation minimale ------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* ---------- Titres et prose ---------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  /* Filet de sécurité au zoom extrême : un mot long composé à 48 px (par ex.
     « professionnel ») dépasse la largeur utile bien avant 320 px. « anywhere »
     — et non « break-word » — parce que seul le premier entre dans le calcul de
     largeur min-content, donc dans le dimensionnement de la colonne de grille
     qui porte le titre. Sans effet aux largeurs courantes : la coupure
     n'intervient que si le mot ne tient pas sur la ligne. */
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  margin-bottom: 24px;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-h2);
  margin-bottom: 16px;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
}

p {
  margin: 0 0 20px;
  text-align: left;
}

p:last-child {
  margin-bottom: 0;
}

/* Longueur de ligne : 60 à 75 caractères sur tout bloc de prose. */
.prose {
  max-width: var(--measure);
}

.lead {
  color: var(--slate);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.secondary {
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

/* Libellé de section — seul emploi autorisé des capitales.
   Le filet d'accent qui le précède est ce qui signale l'ouverture d'une
   section : sans lui, un libellé de 13 px en ardoise passe inaperçu. */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--slate);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-label::before {
  content: '';
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  background: var(--accent);
}

/* Mise en évidence d'un segment de titre : un filet d'accent posé sous le
   texte. Tracé en fond plutôt qu'en bordure, pour suivre les retours à la
   ligne sans forcer d'insécable. */
.hl {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.08em;
  background-position: 0 96%;
  padding-bottom: 0.06em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-dark);
}

/* ---------- Accessibilité ------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-secondary);
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Gabarit ------------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Bandes de fond alternées : c'est ce qui donne au document son rythme
   vertical. Chaque bande porte l'espacement inter-sections. */
.band {
  padding-block: var(--space-section);
  background: var(--bg);
}

.band--surface {
  background: var(--surface);
}

.band + .band--surface,
.band--surface + .band {
  border-top: 1px solid var(--rule);
}

/* Bande sombre — accroche et rappels d'action. L'encre profonde donne au
   document deux points d'ancrage à fort contraste ; tout le texte qu'elle
   porte est blanc ou ardoise claire, jamais l'ardoise #5A6472. */
.band--ink {
  background: var(--ink-deep);
  color: var(--on-dark);
}

.band--ink h1,
.band--ink h2,
.band--ink h3,
.band--ink strong {
  color: var(--on-dark);
}

.band--ink p,
.band--ink .lead,
.band--ink .secondary,
.band--ink .section-label {
  color: var(--on-dark-muted);
}

.band--ink .section-label::before {
  background: var(--accent-light);
}

.band--ink .hl {
  background-image: linear-gradient(var(--accent-light), var(--accent-light));
}

/* Le rouge de la palette ne tient que 3,18:1 sur l'encre profonde. Un lien
   posé sur la bande sombre prend donc le rouge éclairci (5,04:1) et passe au
   blanc au survol, pour que l'état de survol reste perceptible. */
.band--ink a:not(.button) {
  color: var(--accent-light);
}

.band--ink a:not(.button):hover {
  color: var(--on-dark);
}

.band + .band--ink,
.band--ink + .band,
.band--ink + .band--surface {
  border-top: 0;
}

.band--ink :focus-visible {
  outline-color: var(--on-dark);
}

section {
  padding-block: 0;
}

section + section {
  margin-top: var(--space-section);
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---------- En-tête ------------------------------------------------------ */

.site-header {
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* Le nom pousse la ligne de positionnement et l'action aux deux extrémités. */
.site-header .tagline {
  margin-right: auto;
}

.site-header .button {
  min-height: 40px;
  padding: 10px 20px;
}

@media (max-width: 599px) {
  .site-header .button {
    display: none; /* l'accroche porte déjà l'action, à 200 px de là */
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
  min-width: 0;
}

.wordmark svg {
  flex: 0 0 auto;
}

/* Filet de sécurité au zoom extrême : le logotype se replie plutôt que de
   forcer une largeur minimale au document. */
.wordmark span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tagline {
  margin: 0;
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

/* ---------- Accroche ----------------------------------------------------- */

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 64px;
  }
}

.hero__text {
  min-width: 0;
}

.hero__text p {
  max-width: var(--measure);
}

.hero__actions {
  margin: 0;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* En mobile les deux boutons occupent toute la colonne : deux blocs de
   largeurs différentes empilés donnent une cible principale plus faible. */
@media (max-width: 599px) {
  .hero__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__buttons .button {
    width: 100%;
  }
}

/* Bandeau de réassurance : les quatre points qui lèvent les objections
   avant qu'elles se forment. Contenu strictement factuel, repris des
   conditions et du tableau des forfaits. */
.hero__proof {
  display: grid;
  gap: 12px 32px;
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule-dark);
  list-style: none;
  padding-left: 0;
}

@media (min-width: 620px) {
  .hero__proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero__proof li {
  position: relative;
  padding-left: 26px;
  color: var(--on-dark-muted);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.hero__proof li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent-light);
  border-bottom: 2px solid var(--accent-light);
  transform: rotate(-45deg);
}

.hero__art svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1000px) {
  .hero__art {
    /* La composition déborde légèrement vers la droite pour occuper la
       gouttière et éviter le vide en grand écran. */
    margin-right: -8px;
  }
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--accent);
  color: var(--surface);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease;
}

.button:hover {
  background: var(--accent-dark);
  color: var(--surface);
}

.button--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--ink);
  color: var(--surface);
}

/* Variante posée sur la bande sombre. La bordure est plus marquée que les
   filets de la bande : c'est elle qui délimite le composant, elle doit tenir
   le 3:1 exigé pour les contours d'interface (relevé : 3,78:1). */
.band--ink .button--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--on-dark);
}

.band--ink .button--ghost:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
}

/* Chevron d'action : signale qu'il se passe quelque chose au clic. */
.button--cta::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Mention sous le bouton : c'est elle qui désamorce la dernière hésitation. */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.button__note {
  margin: 0;
  max-width: var(--measure);
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.band--ink .button__note {
  color: var(--on-dark-muted);
}

/* ---------- Cartes de forfait -------------------------------------------- */

.plans {
  display: grid;
  gap: 24px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    /* Marge de respiration pour la surélévation de la carte mise en avant. */
    padding-block: 14px;
  }
}

/* La surface de la carte (fond, bordure, arrondi) est peinte par un
   pseudo-élément posé en absolu, et non par la boîte elle-même. C'est donc
   cette surface qui porte la surélévation de la carte mise en avant : le
   contenu, lui, reste dans le flux normal, avec le même rembourrage sur les
   trois cartes. Deux conséquences voulues :
     — les trois prix restent alignés au pixel près malgré le scale ;
     — aucune taille de police n'est multipliée par 1,03, donc toutes les
       valeurs rendues restent celles du tableau typographique. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 0;
  background: transparent;
  min-width: 0; /* la carte peut se resserrer sous la largeur de son contenu */
}

.plan::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04),
              0 10px 28px rgba(13, 27, 42, 0.05);
}

/* Le contenu passe au-dessus de la surface (le badge garde son position:absolute). */
.plan > :not(.plan__badge) {
  position: relative;
}

.plan--featured::before {
  border: 2px solid var(--accent);
  box-shadow: 0 2px 4px rgba(13, 27, 42, 0.05),
              0 18px 44px rgba(13, 27, 42, 0.10);
}

@media (min-width: 900px) {
  .plan--featured::before {
    transform: scale(1.03);
  }

  .plan--featured .plan__badge {
    /* Recalé sur l'arête supérieure de la surface agrandie. */
    top: -1.5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan--featured::before {
    transform: none;
  }

  .plan--featured .plan__badge {
    top: 0;
  }
}

.plan__badge {
  position: absolute; /* hors flux : n'affecte pas l'alignement des prix */
  top: 0;
  left: 28px;
  transform: translateY(-50%);
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Contenu dans la carte, et repli sur plusieurs lignes en cas de zoom
     extrême plutôt qu'un débordement horizontal. */
  max-width: calc(100% - 56px);
}

.plan__name {
  margin-bottom: 6px;
}

/* Une ligne qui dit à qui la carte s'adresse : sans elle, le visiteur
   compare trois prix sans savoir lequel le concerne. */
.plan__tag {
  margin: 0 0 20px;
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.plan__currency {
  color: var(--slate);
  font-size: var(--fs-cad);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.plan__features {
  flex: 1 1 auto;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-item);
  line-height: 1.6;
}

.plan__features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.plan__features li:last-child {
  margin-bottom: 0;
}

/* Puce cochée décorative, dessinée en CSS (aucun glyphe requis). */
.plan__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.plan__delay {
  margin: 0 0 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

/* Le groupe porte l'alignement en bas ; le bouton et sa mention descendent
   ensemble. */
.plan__cta {
  margin-top: auto;
  align-items: stretch;
  gap: 10px;
}

.plan .button {
  width: 100%;
}

/* ---------- Bande de rappel d'action ------------------------------------- */

/* Un visiteur qui a lu le processus est au moment le plus favorable de sa
   lecture ; l'action doit être là, pas 800 px plus bas. */
.cta-band .shell {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band .shell {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }
}

.cta-band h2 {
  margin-bottom: 16px;
}

.cta-band p {
  max-width: var(--measure);
  margin-bottom: 0;
}

/* ---------- Listes génériques -------------------------------------------- */

.checklist {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .checklist {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.checklist li {
  max-width: var(--measure);
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}

/* ---------- Processus ---------------------------------------------------- */

.steps {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }
}

@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.steps li {
  counter-increment: step;
  max-width: var(--measure);
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
}

.steps h3 {
  margin-bottom: 12px;
}

.steps p {
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ---------- Mise en page en deux colonnes -------------------------------- */

/* Titre de section à gauche, contenu à droite. Sans cela, les sections de
   prose laissent la moitié droite de l'écran vide en grand format. */
@media (min-width: 1000px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }

  .split__head h2 {
    margin-bottom: 0;
  }
}

/* ---------- Conditions --------------------------------------------------- */

.terms {
  padding: 28px 32px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04),
              0 10px 28px rgba(13, 27, 42, 0.05);
}

/* ---------- FAQ ---------------------------------------------------------- */

.faq {
  display: grid;
  gap: 12px;
}

.terms p,
.faq__answer p {
  max-width: var(--measure);
}

.faq details {
  /* Sans cela, min-width:auto donne à l'élément de grille la largeur du plus
     long mot de la question, ce qui déborde au zoom extrême. */
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
  min-width: 0;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 0.4em;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq details[open] summary {
  padding-bottom: 8px;
}

.faq .faq__answer {
  padding: 0 24px 24px;
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}

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

.site-footer {
  padding-block: 40px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  color: var(--slate);
  font-size: var(--fs-footer);
  line-height: 1.5;
}

.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}

.site-footer p {
  margin: 0;
}

.site-footer strong {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Page « paiement indisponible » ------------------------------- */

.centered {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px var(--gutter);
  text-align: left;
}

.notice {
  width: 100%;
  max-width: 560px;
}

.notice__icon {
  display: block;
  margin-bottom: 28px;
  color: var(--slate);
}

.notice__panel {
  margin: 0 0 28px;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.notice__panel strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
}

.notice__email {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--accent);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: break-word;
}

.notice__back {
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.notice__back a {
  color: var(--slate);
}

.notice__back a:hover {
  color: var(--ink);
}

/* ---------- Exemples de conception --------------------------------------- */

/* Les trois marques présentées ici sont des conceptions de démonstration :
   elles portent chacune leur propre teinte, car un portfolio composé
   uniquement du rouge et de l'encre de ce site ne se lirait pas comme du
   travail de conception mais comme de la décoration. Ces teintes n'existent
   qu'à l'intérieur des cartes ci-dessous ; elles ne rejoignent pas la palette
   du document. Relevés sur blanc : 7,88:1, 5,74:1 et 5,87:1. */

.works {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .works {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.work {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04),
              0 10px 28px rgba(13, 27, 42, 0.05);
}

.work--boreal  { --tone: #1F5B4E; --tone-b: #C87F3A; --tone-c: #EFE7DA; }
.work--rive    { --tone: #1D6E8B; --tone-b: #57B6A9; --tone-c: #EDF3F5; }
.work--atelier { --tone: #8A5A2B; --tone-b: #2E2A26; --tone-c: #E4DBCC; }

/* La planche d'exposition. Le fond reprend la teinte de la marque à 6 % ;
   les navigateurs sans color-mix conservent le gris de fond déclaré juste
   au-dessus. */
.work__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  background: color-mix(in srgb, var(--tone) 6%, #FFFFFF);
}

.work__mark {
  display: block;
  width: 128px;
  height: 128px;
  color: var(--tone);
}

.work__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 28px;
}

.work__name {
  margin-bottom: 4px;
}

.work__sector {
  margin: 0 0 16px;
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.work__note {
  margin: 0 0 24px;
  font-size: var(--fs-item);
  line-height: 1.6;
}

/* Échantillons de palette : purement illustratifs, donc retirés de l'arbre
   d'accessibilité. Le contour les détache des teintes les plus claires. */
.work__palette {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.work__palette li {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(13, 27, 42, 0.12);
  border-radius: 4px;
}

.work__palette li:nth-child(1) { background: var(--tone); }
.work__palette li:nth-child(2) { background: var(--tone-b); }
.work__palette li:nth-child(3) { background: var(--tone-c); }

.work__scope {
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

.work__scope a {
  color: var(--slate);
}

.work__scope a:hover {
  color: var(--ink);
}

/* ---------- Questionnaire de brief --------------------------------------- */

/* Le compteur est remis à zéro sur le conteneur des quatre groupes, et non
   sur chaque liste : le client suit un fil continu de quatorze questions,
   pas quatre listes de trois. */
.brief-flow {
  counter-reset: question;
}

.brief {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brief li {
  min-width: 0;
  padding-left: 48px;
  position: relative;
}

.brief li::before {
  counter-increment: question;
  content: counter(question);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--slate);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.brief__q {
  margin: 0 0 6px;
  padding-top: 4px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  max-width: var(--measure);
}

.brief__hint {
  margin: 0;
  color: var(--slate);
  font-size: var(--fs-secondary);
  line-height: 1.6;
  max-width: var(--measure);
}
/* Version imprimable : le questionnaire devient un formulaire à remplir à la
   main. Une ligne d'écriture sous chaque question, et tout ce qui relève de
   la navigation disparaît. */
@media print {
  .site-header .button,
  .skip-link,
  .brief-cta,
  .site-footer {
    display: none;
  }

  .band,
  .band--ink,
  .band--surface {
    padding-block: 6mm 0;
    background: #FFFFFF;
    color: #000000;
  }

  .band--ink h1,
  .band--ink p,
  .band--ink .section-label {
    color: #000000;
  }

  .brief li {
    padding-bottom: 22mm;
    border-bottom: 1px solid #999999;
    break-inside: avoid;
  }
}

/* Sommaire de l'introduction. Il remplit la moitié droite de la bande sombre,
   vide autrement en grand format, et donne au client l'ampleur exacte de ce
   qu'on lui demande avant qu'il commence. */
.brief-head {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1000px) {
  .brief-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 72px;
  }
}

.brief-toc ul {
  margin: 0;
  padding: 24px 28px;
  border: 1px solid var(--rule-dark);
  border-radius: 8px;
  list-style: none;
}

.brief-toc li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-dark);
}

/* Le soulignement, très atténué, suffit à identifier le lien sans que la
   couleur seule porte l'information. */
.band--ink .brief-toc a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  color: var(--on-dark);
  font-size: var(--fs-item);
  line-height: 1.5;
  /* Le soulignement est porté par le libellé seul : posé sur le lien, il se
     propage aux boîtes descendantes — y compris au décompte, qui se lirait
     alors comme un second lien — et aucune déclaration sur celles-ci ne peut
     l'annuler. */
  text-decoration: none;
}

.brief-toc__label {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 2px;
}

.band--ink .brief-toc a:hover {
  color: var(--accent-light);
}

.band--ink .brief-toc a:hover .brief-toc__label {
  text-decoration-color: currentColor;
}

.brief-toc__count {
  flex: 0 0 auto;
  color: var(--on-dark-muted);
  font-size: var(--fs-secondary);
}

@media print {
  .brief-toc {
    display: none;
  }
}