/* FlintPost : une route, un tri, un courriel.
   Repris de la maquette « FlintPost » retenue par le porteur le 2026-10-13 (site jaune, logo
   Cadence) : sa feuille de base, sa couche d'identité et sa feuille de marque, réunies ici pour
   la seule page d'accueil. Le jaune devient un cuivre, choix du porteur du même jour. Aucun
   texte sous 12 px. Polices auto-hébergées, licences OFL dans /polices/. Aucune ressource d'un
   autre site. */

@font-face {
  font-family: "Onest";
  src: url("/polices/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/polices/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Palette. Accent cuivre (teinte 23°, loin du jaune de La Poste à 48°), choix du porteur du
   2026-10-13 (variante C), après l'orange de chantier du même jour, jugé trop vif.
   --accent : surfaces (boutons, offre, étiquettes du tri), toujours avec du blanc dessus
   (--on-accent, 4,9:1) ; contre l'asphalte 3,1:1 et contre le papier 4,5:1, pour l'interface.
   --accent-texte : la teinte claire, pour tout texte ou anneau de focus couleur cuivre sur fond
   sombre (5,4:1 sur l'asphalte, 4,7:1 au moins sur la photo voilée). L'accent n'est jamais une
   couleur de texte. */
:root {
  --paper: #f7f5eb;
  --ink: #202624;
  --accent: #a16139;
  --accent-texte: #d28757;
  --on-accent: #ffffff;
  --acier: #73837c;
  --line: #bdc2b7;
  --brume: #d9e0d9;
  --display: "Barlow Condensed", Impact, sans-serif;
  --pad: clamp(22px, 5vw, 88px);
}

/* Base */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Onest", Arial, sans-serif; font-size: 17px; line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { max-width: 66ch; margin-top: 0; margin-bottom: 20px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin-top: 0; line-height: 1.04; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.055em; }
h2 { font-size: clamp(52px, 5.8vw, 88px); letter-spacing: -.02em; text-transform: uppercase; line-height: .94; margin-bottom: 25px; }
h3 { font-size: 25px; letter-spacing: -.035em; }
small, .fine { font-size: 14px; line-height: 1.6; }
.fine { max-width: 62ch; }
strong { font-weight: 700; }
/* Focus : anneau double, encre et papier (accent et encre sur fond sombre ou sur la photo),
   au moins 3:1 contre chaque fond de la page. */
button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--paper); }
.site-header :focus-visible, .terrain-copy :focus-visible, .p7-proof :focus-visible, .methode :focus-visible, .site-footer :focus-visible { outline-color: var(--accent-texte); box-shadow: 0 0 0 6px var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }
[hidden] { display: none !important; }
.skip { position: fixed; left: 20px; top: -80px; z-index: 1000; background: var(--accent); color: var(--on-accent); padding: 12px; }
.skip:focus { top: 20px; }

/* Logo Cadence : PNG blanc sur fond sombre, encre sur fond clair */

.brand { display: flex; align-items: center; flex: none; }
.brand .logo { width: 212px; height: auto; max-width: none; }

/* En-tête */

.site-header { position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--pad); min-height: 94px; background: var(--ink); color: var(--paper); }
.site-header nav { display: flex; gap: 28px; margin-left: auto; margin-right: 15px; font-size: 15px; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-end { display: flex; align-items: center; gap: 25px; }
.nav-cta { border-bottom: 1px solid; padding: 5px 0; font-size: 15px; font-weight: 650; }
.motion-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 10px 13px; min-height: 44px; border: 1px solid currentColor; border-radius: 30px; white-space: nowrap; }
.motion-toggle[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Haut de page : la photographie, le titre, le courriel du matin */

.hero { position: relative; overflow: clip; }
.terrain-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 60px; align-items: center; padding: 65px var(--pad) 115px; min-height: 740px; color: #fff; isolation: isolate; }
.terrain-photo, .terrain-shade { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.terrain-photo picture { display: block; height: 100%; }
.terrain-photo img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 70%; will-change: transform; }
/* Voile : sombre à gauche sous le texte, plus léger à droite sous la carte, et un dégradé en
   bas pour le bandeau et le crédit. Tout texte posé sur la photo garde au moins 4,5:1 contre
   son pixel le plus clair, de 320 à 1 680 px (mesuré dans Chromium). */
.terrain-shade { z-index: -1; background: linear-gradient(0deg, #111f21c7, transparent 45%), linear-gradient(90deg, #14211af5 0%, #14211aeb 50%, #14211a5c 100%); }
.terrain-copy { position: relative; z-index: 3; min-width: 0; }
.eyebrow { font-size: 15px; font-weight: 600; margin-bottom: 22px; line-height: 1.5; }
.terrain-hero .eyebrow { display: flex; align-items: center; gap: 11px; color: #fff; }
.terrain-hero .eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--accent); flex: none; }
.hero-title { font-size: clamp(68px, 7.8vw, 130px); letter-spacing: -.025em; line-height: .91; margin-bottom: 28px; text-transform: uppercase; }
.hero-title > span { display: block; will-change: transform; }
.hero-title > span:last-child { color: var(--accent-texte); }
.lead { font-size: 18px; max-width: 43ch; line-height: 1.55; margin-bottom: 28px; }
.terrain-rail { display: flex; justify-content: space-between; position: absolute; bottom: 26px; left: var(--pad); right: var(--pad); border-top: 1px solid #ffffff80; padding: 19px 0 0; margin: 0; list-style: none; font-size: 15px; z-index: 3; }
/* La route est tracée sous le voile : visible à droite, effacée sous le titre. */
.road-line { position: absolute; top: 0; left: 5%; width: 75%; height: 100%; z-index: -2; opacity: .35; pointer-events: none; }
.road-line path { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .65; }

.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; background: var(--accent); color: var(--on-accent); padding: 19px 25px; min-height: 60px; border: 1px solid var(--accent); font-weight: 650; font-size: 16px; line-height: 1.3; position: relative; overflow: hidden; transition: background .2s, color .2s; }
.button > span { font-size: 22px; line-height: 1; }
.button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Sur la photo, le bouton cuivre est cerné de la teinte claire : au moins 3:1 contre la photo. */
.terrain-copy .button { border: 2px solid var(--accent-texte); padding: 18px 24px; }
.terrain-copy .button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Le courriel du matin : aperçu du format, sur la photo */

.morning-mail { position: relative; z-index: 4; align-self: center; max-width: 440px; margin: 10px 0; padding: 25px 29px; background: var(--paper); color: var(--ink); border-top: 5px solid var(--accent); box-shadow: 0 24px 70px #0004; transform: rotate(3deg); }
.morning-mail::after { content: ""; position: absolute; z-index: -1; inset: 10px -9px -9px 10px; border: 1px solid #f7f5eb70; pointer-events: none; }
.mail-top { display: flex; justify-content: space-between; gap: 15px; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mail-top p { margin: 0; }
.mail-sender { display: flex; align-items: center; gap: 9px; margin-top: 17px; flex-wrap: wrap; }
.mail-sender .logo { width: 178px; height: auto; max-width: none; }
.mail-sender > span { font-size: 14px; flex: 0 0 100%; margin-top: 12px; }
.morning-mail h2 { font-size: 52px; line-height: .97; margin: 15px 0 20px; }
.mail-apercus { perspective: 900px; }
.mail-filter { font-size: 15px; margin: 0 0 12px; font-weight: 650; }
.mail-preview { background: #fff; padding: 20px; border-left: 4px solid var(--accent); min-height: 195px; }
.mail-preview > span { font-size: 14px; color: #4d6358; }
.mail-preview h3 { font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: -.04em; margin: 13px 0; }
.mail-preview p { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.mail-preview > div { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 13px; font-size: 13px; }
.mail-preview strong { font-weight: 600; }
.mail-note { font-size: 15px; margin: 20px 0 12px; }
.mail-replay { display: flex; justify-content: space-between; gap: 20px; width: 100%; padding: 14px 0; border-top: 1px solid var(--line); font-weight: 650; font-size: 15px; text-align: left; }
.mail-replay span { font-size: 22px; line-height: 1; }
.morning-mail > small { display: block; color: #57645d; }

/* Sections */

.section { padding: 105px var(--pad); position: relative; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 7%; margin-bottom: 55px; align-items: end; }
.section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 18px; }
.section-intro h2 { margin-bottom: 0; }
.section-intro > p:last-child { font-size: 18px; max-width: 48ch; margin-bottom: 5px; }

/* Le tri */

.pipeline { overflow: clip; }
.pipeline-stage { display: grid; grid-template-columns: 1fr 160px 1fr; gap: 45px; align-items: center; min-height: 370px; position: relative; padding-bottom: 45px; }
.pipeline-input { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; }
.flyer { display: block; border: 1px solid var(--line); padding: 15px 18px; font-size: 16px; background: var(--paper); transform: rotate(-3deg); max-width: 320px; }
.flyer:nth-child(2n) { transform: rotate(2deg); margin-left: 20px; }
.flyer.relevant { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.filter-gate { height: 220px; border-left: 2px dashed var(--ink); border-right: 2px dashed var(--ink); display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.gate-symbol { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--ink); flex: none; }
.gate-symbol img { width: 56px; height: auto; }
.filter-gate strong { font-size: 17px; }
.filter-gate small { font-size: 14px; }
.pipeline-output { background: var(--ink); color: var(--paper); padding: 32px; box-shadow: 10px 10px 0 var(--accent); transform: rotate(3deg); }
.pipeline-output > span, .pipeline-output > strong { font-size: 15px; }
.pipeline-output h3 { font-size: 30px; line-height: 1.1; margin: 25px 0 18px; }
.pipeline-output p { font-size: 17px; }
.pipeline-output > strong { padding-top: 12px; border-top: 1px solid currentColor; display: block; }
.pipeline-caption { position: absolute; bottom: 0; left: 0; margin: 0; font-size: 14px; }

/* La mesure */

.p7-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; background: var(--ink); color: var(--paper); align-items: center; overflow-x: clip; }
.p7-proof > * { min-width: 0; }
.proof-number { font-family: var(--display); font-size: clamp(110px, 15vw, 235px); letter-spacing: -.04em; line-height: 1; color: var(--accent-texte); white-space: nowrap; margin: 0; max-width: none; }
.proof-number small { font-size: .36em; line-height: 1; }
.p7-proof h2 { font-size: clamp(38px, 4.2vw, 66px); line-height: .98; }
.p7-proof > div p { font-size: 17px; }
.p7-proof > div .fine { font-size: 14px; color: var(--brume); }

/* L'aperçu : le vrai courriel du service */

.tenders-section { background: #e9ece2; overflow-x: clip; }
.tender-filters { display: flex; gap: 30px; align-items: end; padding: 20px 0 30px; border-top: 1px solid var(--line); }
.tender-filters label, .filtre-fixe { display: flex; flex-direction: column; font-size: 16px; gap: 7px; margin: 0; }
.filtre-fixe strong { font-size: 17px; padding: 10px 0; min-height: 48px; border-bottom: 1px solid var(--ink); }
.tender-filters select { background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 8px 24px 8px 0; font-size: 17px; min-height: 48px; max-width: 300px; }
.tender-filters > span { margin-left: auto; font-size: 16px; padding-bottom: 10px; }
.exemple { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 55px; align-items: start; padding-top: 25px; }
.courriel { margin: 0; background: #fff; color: #1a1a1a; box-shadow: 12px 12px 0 var(--accent); }
.courriel-tete { position: relative; background: var(--ink); color: var(--paper); padding: 18px 24px; font-size: 14px; }
.courriel-tete p { margin: 0; max-width: none; }
.courriel-tete p + p { margin-top: 4px; }
.courriel-tete .champ { color: var(--brume); }
/* Aperçu : une étiquette discrète en tête de l'en-tête du courriel. */
.courriel-tete .tampon { display: inline-block; margin: 0 0 10px; border: 1px solid var(--brume); color: var(--brume); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; }
.courriel-reel { background: #fff; color: #1a1a1a; }
.courriel-reel * { all: revert; }
.empty { padding: 35px; background: var(--paper); font-size: 17px; max-width: none; margin: 0; }
.lecture { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; position: sticky; top: 30px; }
.lecture li { border-top: 1px solid var(--line); padding-top: 18px; }
.lecture h3 { font-size: 24px; margin: 8px 0 10px; }
.lecture p { font-size: 16px; margin: 0; }
.tender-number { font-family: var(--display); font-size: 66px; line-height: 1; color: var(--acier); }
.exemple-note { font-size: 15px; max-width: 85ch; margin: 45px 0 0; }
.official { font-size: 14px; max-width: 85ch; margin: 30px 0 0; }

/* Le bon avis, la bonne suite */

.methode { background: var(--ink); color: var(--paper); }
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 55px; }
.method-steps article { border-top: 1px solid var(--acier); padding-top: 22px; }
.method-steps article > span { font-size: 16px; font-weight: 700; color: var(--accent-texte); }
.method-steps h3 { font-size: 27px; line-height: 1.16; letter-spacing: -1px; margin: 28px 0 18px; max-width: 20ch; }
.method-steps p { font-size: 17px; color: var(--brume); }

/* L'offre et le pilote */

.offer-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: start; background: var(--accent); color: var(--on-accent); }
.offer-section h2 { font-size: clamp(38px, 4.4vw, 68px); }
.offer-section > div > p { max-width: 45ch; }
.price { display: flex; gap: 20px; align-items: center; margin: 35px 0 22px; }
.price > strong { font-family: var(--display); font-size: 110px; line-height: 1; letter-spacing: -.07em; }
.price > span { font-size: 16px; line-height: 1.7; }
.signup { background: var(--paper); color: var(--ink); padding: 35px; box-shadow: 12px 12px 0 #20262418; scroll-margin-top: 30px; }
.signup h3 { font-size: 27px; line-height: 1.2; margin-bottom: 18px; }
.signup p { font-size: 16px; }
.signup .signup-etat { display: inline-block; background: var(--ink); color: var(--paper); font-weight: 650; padding: 10px 14px; margin-bottom: 24px; }
.signup-liste { margin: 0 0 24px; padding: 0; list-style: none; font-size: 16px; }
.signup-liste li { border-top: 1px solid var(--line); padding: 11px 0; }
.signup-liste li:last-child { border-bottom: 1px solid var(--line); }
.signup .button { width: 100%; margin-bottom: 16px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.signup small { display: block; font-size: 14px; }

/* Pied de page */

.site-footer { padding: 50px var(--pad); display: flex; align-items: center; flex-wrap: wrap; gap: 25px 45px; font-size: 15px; background: var(--ink); color: var(--paper); }
.site-footer > p { margin: 0 0 0 auto; max-width: none; }
.site-footer > .official { flex: 0 0 100%; max-width: 85ch; margin: 0; color: var(--brume); }
.site-footer > small { flex: 0 0 100%; font-size: 14px; }
.site-footer small a { margin-left: 12px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Protection des données : une page de lecture */

.donnees { padding: 80px var(--pad) 105px; }
.donnees h1 { font-size: clamp(52px, 7vw, 104px); letter-spacing: -.02em; text-transform: uppercase; line-height: .94; margin-bottom: 25px; }
.donnees .chapeau { font-size: 20px; max-width: 48ch; }
.donnees .prose { max-width: 68ch; }
.donnees h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 45px 0 14px; }
.donnees a { text-decoration: underline; text-underline-offset: 3px; }

.toast { position: fixed; z-index: 100; bottom: 25px; left: 50%; transform: translate(-50%, 30px); background: var(--ink); color: var(--paper); padding: 14px 22px; box-shadow: 0 8px 45px #0003; opacity: 0; visibility: hidden; font-size: 16px; line-height: 1.5; max-width: calc(100% - 40px); width: max-content; transition: opacity .25s, transform .25s, visibility .25s; }
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Grands écrans */

@media (min-width: 1600px) {
  .hero, .section, .site-header, .site-footer { padding-left: max(var(--pad), calc((100vw - 1500px) / 2)); padding-right: max(var(--pad), calc((100vw - 1500px) / 2)); }
  .terrain-hero { grid-template-columns: 1.6fr 1fr; gap: 90px; }
  .morning-mail { justify-self: end; width: 440px; }
}

@media (max-width: 1100px) {
  .site-header { gap: 15px; }
  .site-header nav { gap: 18px; margin-right: 0; }
  .header-end { gap: 14px; }
  .terrain-hero { grid-template-columns: 1.3fr 1fr; gap: 30px; min-height: 730px; }
  .hero-title { font-size: 8vw; }
  .morning-mail { padding: 20px; transform: rotate(2deg); }
  .morning-mail h2 { font-size: 44px; }
  .mail-preview > div { flex-wrap: wrap; }
  .terrain-rail { font-size: 14px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .pipeline-stage { grid-template-columns: 1fr 125px 1fr; gap: 25px; }
  .pipeline-output { padding: 25px; }
  .exemple { grid-template-columns: minmax(0, 1fr) 230px; gap: 35px; }
  .tender-number { font-size: 55px; }
  .offer-section { gap: 6%; }
}

/* Téléphone : la narration reste verticale */

@media (max-width: 800px) {
  :root { --pad: 24px; }
  html { scroll-padding-top: 25px; }
  .site-header { min-height: 80px; padding-top: 13px; padding-bottom: 13px; gap: 12px; flex-wrap: wrap; }
  .site-header nav, .nav-cta, .motion-label { display: none; }
  .header-end { margin-left: auto; }
  .motion-toggle { min-width: 44px; justify-content: center; padding: 9px; font-size: 16px; }
  .terrain-hero { grid-template-columns: 1fr; padding-top: 43px; padding-bottom: 105px; gap: 40px; min-height: 0; }
  .hero-title { font-size: clamp(58px, 10vw, 90px); line-height: .93; }
  .terrain-hero .eyebrow { font-size: 14px; }
  .terrain-shade { background: linear-gradient(0deg, #111f21c7, transparent 45%), linear-gradient(#14211aeb, #14211aeb); }
  .terrain-photo img { object-position: 58% 50%; }
  .road-line { display: none; }
  .morning-mail { justify-self: center; max-width: 460px; width: 100%; margin: 0; transform: rotate(1deg); padding: 24px; }
  .morning-mail h2 { font-size: 52px; }
  .mail-preview > div { flex-wrap: nowrap; }
  .terrain-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; bottom: 22px; font-size: 14px; align-items: start; padding-top: 15px; }
  .section { padding-top: 70px; padding-bottom: 70px; }
  .section-intro { display: block; margin-bottom: 35px; }
  .section-intro h2 { margin-bottom: 25px; }
  .section-intro .eyebrow { margin-bottom: 20px; }
  .section-intro > p:last-child { font-size: 17px; margin: 0; }
  h2 { font-size: clamp(43px, 8vw, 65px); line-height: .98; }
  .pipeline-stage { display: flex; flex-direction: column; gap: 30px; padding-bottom: 60px; min-height: 0; }
  .pipeline-input { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .flyer { font-size: 14px; padding: 13px; max-width: none; }
  .flyer:nth-child(2n) { margin: 0; }
  .filter-gate { height: auto; min-height: 145px; width: 100%; border: 0; border-top: 2px dashed var(--ink); border-bottom: 2px dashed var(--ink); padding: 16px; display: grid; grid-template-columns: 80px 1fr; gap: 0 20px; text-align: left; justify-items: start; }
  .filter-gate .gate-symbol { grid-row: 1 / 3; }
  .filter-gate strong { align-self: end; }
  .filter-gate small { align-self: start; }
  .pipeline-output { width: calc(100% - 10px); align-self: start; transform: rotate(1deg); margin: 0 10px 10px 0; }
  .tender-filters { flex-wrap: wrap; gap: 20px; align-items: center; }
  .tender-filters label, .filtre-fixe { flex: 1 1 160px; min-width: 0; }
  .tender-filters select { width: 100%; max-width: 100%; font-size: 16px; }
  .filtre-fixe strong { font-size: 16px; }
  .tender-filters > span { margin: 0; width: 100%; padding: 0; }
  .exemple { grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .courriel { box-shadow: 8px 8px 0 var(--accent); margin-right: 8px; }
  .courriel-tete { padding: 16px; }
  .lecture { position: static; }
  .tender-number { font-size: 44px; }
  .p7-proof { grid-template-columns: 1fr; gap: 30px; }
  .proof-number { font-size: 150px; }
  .p7-proof h2 { font-size: 43px; }
  .method-steps { grid-template-columns: 1fr; gap: 30px; margin-top: 35px; }
  .method-steps article { padding-top: 20px; }
  .method-steps h3 { font-size: 26px; margin: 20px 0 15px; max-width: none; }
  .method-steps p { margin-bottom: 5px; max-width: 50ch; }
  .offer-section { grid-template-columns: 1fr; gap: 35px; }
  .offer-section h2 { font-size: 56px; }
  .price { margin-top: 25px; margin-bottom: 25px; }
  .signup { padding: 26px; }
  .site-footer { align-items: start; gap: 25px; }
  .site-footer > p { margin-left: 0; }
  .donnees { padding-top: 55px; padding-bottom: 70px; }
  .donnees .chapeau { font-size: 18px; }
}

@media (max-width: 480px) {
  .brand .logo { width: 187px; }
  .hero-title { font-size: clamp(55px, 13.4vw, 66px); }
  .lead { font-size: 17px; }
  .terrain-hero .button { width: 100%; gap: 12px; }
  .morning-mail { padding: 20px; }
  .mail-preview { padding: 17px; }
  .mail-preview h3 { font-size: 22px; }
  .mail-preview > div { flex-wrap: wrap; font-size: 14px; }
  .tender-filters label, .filtre-fixe { flex-basis: 100%; }
  .offer-section h2 { font-size: 48px; }
  .price > strong { font-size: 96px; }
  .signup { padding: 24px; }
}

@media (max-width: 360px) {
  :root { --pad: 20px; }
  .brand .logo { width: 168px; }
  .morning-mail h2 { font-size: 44px; }
  .mail-sender .logo { width: 160px; }
  .proof-number { font-size: 125px; }
  .offer-section h2 { font-size: 42px; }
}

/* Mouvement réduit ou mis en pause : aucun défilement animé, aucune transition */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-title > span, .terrain-photo img { will-change: auto; }
}

html:has(body.motion-paused) { scroll-behavior: auto; }

/* Exemple de courriel : styles en ligne du gabarit réel (veille_ao.alerte.courriel),
   devenus des classes par sites/p7/construire.py. Généré, ne pas modifier à la main. */
.courriel-reel .c-11ad96be{display:inline-block;background:#0b5394;color:#ffffff;padding:8px 14px;border-radius:4px;text-decoration:none}
.courriel-reel .c-1724e0e9{border:1px solid #c8c8c8;border-radius:6px;padding:12px 16px;margin:16px 0}
.courriel-reel .c-339c63a1{text-align:left;vertical-align:top;padding:4px 8px}
.courriel-reel .c-41cd1997{font-size:13px;color:#555}
.courriel-reel .c-5bbc162b{font-size:13px;color:#333}
.courriel-reel .c-5e461f07{font-size:13px}
.courriel-reel .c-6820e21c{font-size:20px}
.courriel-reel .c-6f880998{font-family:Arial,Helvetica,sans-serif;color:#1a1a1a;max-width:680px;margin:0 auto;padding:16px;line-height:1.45}
.courriel-reel .c-7a3011b4{border-left:4px solid #8a6d00;background:#fff8e1;padding:8px 12px;font-size:14px}
.courriel-reel .c-7da610c6{text-align:left;font-size:12px;color:#555;padding:4px 0}
.courriel-reel .c-cb9494db{border-collapse:collapse;width:100%;background:#f4f6f8;font-size:14px}
.courriel-reel .c-d8e0ed3c{text-align:left;vertical-align:top;padding:4px 8px;width:30%}
.courriel-reel .c-f900ce79{font-size:16px;margin:0 0 8px}