/* Site tragga.lu. Identité de la présentation : Inter, encre bleu nuit, bleu = PRO, rouge = PRIVÉ.
   La couleur ne sert qu'au sens Pro / Privé, toujours doublée du texte. L'action est en encre, sans couleur d'accent. */

/* Inter 4.1 (SIL OFL, polices/LICENSE.txt), auto-hébergée : aucun appel à un tiers. */
@font-face { font-family: Inter; src: url("/polices/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --fond: #fff; --fond-doux: #f3f5f8; --encre: #0a0d14; --texte: #3c4556; --discret: #5a6375; --filet: #dde1e8;
  --pro: #2b57a6; --prive: #b9342c;
  --nuit: #0a0d14; --nuit-doux: #121824; --nuit-encre: #e6ebf3; --nuit-texte: #b9c2d0; --nuit-discret: #8a96aa; --nuit-filet: #232b3a;
  --nuit-pro: #6b93e0; --nuit-prive: #e8645e;
  /* Espacements : base 4 px, jamais de valeur hors de cette échelle. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 80px; --e10: 96px;
  --largeur: 1200px; --marge: var(--e4); --entete: 64px;
  --police: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (min-width: 768px) { :root { --marge: var(--e5); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--police); font-size: 16px; line-height: 1.6; color: var(--texte); background: var(--fond); font-feature-settings: "cv11", "ss01"; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
strong { color: var(--encre); font-weight: 650; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 2px; }
.nuit :focus-visible, .pied :focus-visible { outline-color: var(--nuit-encre); }

.cadre { max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto; padding-inline: var(--marge); }
/* Ancres et lien d'évitement : la cible s'arrête sous l'en-tête collant (64 px + son filet). */
html { scroll-padding-top: calc(var(--entete) + 1px); }

h1, h2, h3, h4 { color: var(--encre); font-weight: 700; }
h1 { font-size: clamp(40px, 2.4vw + 26px, 56px); line-height: 1.06; letter-spacing: -0.032em; }
h2 { font-size: clamp(32px, 1.6vw + 24px, 48px); line-height: 1.1; letter-spacing: -0.026em; max-width: 20ch; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 18px; line-height: 1.35; }
.texte p, .appli-texte p { font-size: 18px; max-width: 60ch; }

.evitement { position: absolute; left: var(--e4); top: -64px; background: var(--encre); color: #fff; padding: var(--e3) var(--e4); z-index: 20; }
.evitement:focus { top: var(--e4); }

/* Boutons et liens d'action */
.bouton { display: inline-flex; align-items: center; min-height: 48px; padding: var(--e3) var(--e5); background: var(--encre); color: #fff; border-radius: 6px; font-weight: 600; text-decoration: none; }
.bouton:hover { background: #222a3a; }
.lien-fort { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lien-fort:hover { text-decoration-thickness: 2px; }

/* Étiquettes PRO / PRIVÉ : la couleur toujours doublée du mot */
.etiquette { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: var(--e1) var(--e2); border-radius: 4px; vertical-align: 2px; }
.etiquette.pro { color: var(--pro); background: #e9eff9; }
.etiquette.prive { color: var(--prive); background: #f9eceb; }
.nuit .etiquette.pro { color: var(--nuit-pro); background: rgba(107, 147, 224, 0.1); }
.nuit .etiquette.prive { color: var(--nuit-prive); background: rgba(232, 100, 94, 0.1); }
.mention { font-size: 14px; color: var(--discret); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; background: var(--fond); border-bottom: 1px solid var(--filet); }
.entete-grille { display: flex; align-items: center; justify-content: space-between; min-height: var(--entete); }
.marque { display: inline-flex; align-items: center; min-height: 44px; }
.marque img { width: auto; height: 28px; }
.bouton-menu { min-height: 44px; padding: 0 var(--e4); font: inherit; font-weight: 600; color: var(--encre); background: none; border: 1px solid var(--filet); border-radius: 6px; cursor: pointer; }
.navigation { display: none; }
.navigation.ouverte { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--entete)); max-height: calc(100dvh - var(--entete)); overflow-y: auto; background: var(--fond); border-bottom: 1px solid var(--filet); padding: var(--e2) var(--marge) var(--e4); }
.navigation a { display: flex; align-items: center; min-height: 48px; font-weight: 500; color: var(--encre); text-decoration: none; }
/* Filets entre les liens du menu du téléphone seulement : sur ordinateur, ils rognaient le cadre du bouton Contact. */
@media (max-width: 1023px) { .navigation a + a { border-top: 1px solid var(--filet); } }
@media (min-width: 1024px) {
  .bouton-menu { display: none; }
  .navigation, .navigation.ouverte { display: flex; flex-direction: row; align-items: center; gap: var(--e6); position: static; padding: 0; border: 0; max-height: none; overflow: visible; }
  .navigation a { min-height: 44px; font-size: 16px; color: var(--texte); }
  .navigation a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 6px; }
  .navigation .nav-contact { color: var(--encre); font-weight: 600; padding: 0 var(--e4); border: 1px solid var(--encre); border-radius: 6px; min-height: 44px; }
  .navigation .nav-contact:hover { background: var(--encre); color: #fff; text-decoration: none; }
}

/* Sections */
.section { padding-block: var(--e7); }
@media (min-width: 768px) { .section { padding-block: var(--e9); } }
.douce { background: var(--fond-doux); }
/* Les rendus du boîtier ont un fond blanc : il prend la teinte de la section. */
.boitier-figure img { mix-blend-mode: multiply; }
.nuit { background: var(--nuit); color: var(--nuit-texte); }
.nuit h2, .nuit h3, .nuit h4, .nuit strong { color: var(--nuit-encre); }

/* Accueil */
.hero { padding-block: var(--e6) var(--e7); }
.hero-grille { display: grid; gap: var(--e6); }
.surtitre { font-size: 14px; font-weight: 600; color: var(--discret); margin-bottom: var(--e4); }
.chapo { font-size: 20px; line-height: 1.55; margin-top: var(--e5); max-width: 38ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e6); margin-top: var(--e6); }
/* Mention de disponibilité sous l'en-tête de chaque page (l'accueil l'a dans son accroche). */
.bandeau { background: var(--fond-doux); border-bottom: 1px solid var(--filet); font-size: 15px; font-weight: 500; color: var(--texte); }
.bandeau p { display: flex; align-items: center; gap: var(--e3); min-height: 40px; padding-block: var(--e2); }
.bandeau .statut-point { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--encre); }
.hero-figure figcaption { font-size: 14px; color: var(--discret); margin-top: var(--e3); }
.hero-annote { display: none; width: 100%; height: auto; }
.annotations path { fill: none; stroke: var(--encre); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.annotations circle { fill: var(--encre); stroke: var(--fond); stroke-width: 2; vector-effect: non-scaling-stroke; }
.annotations text { font-family: var(--police); }
.annotations .titre { font-size: 54px; font-weight: 700; letter-spacing: 0.08em; fill: var(--encre); }
.annotations .titre.pro { fill: var(--pro); }
.annotations .titre.prive { fill: var(--prive); }
.annotations .sous { font-size: 50px; fill: var(--discret); }
@media (min-width: 640px) {
  .hero-annote { display: block; }
  .hero-image-mobile { display: none; }
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--e8) var(--e9); }
  .hero-grille { grid-template-columns: 5fr 7fr; gap: var(--e7); align-items: center; }
}

/* Le point de départ */
.deux-temps { display: grid; gap: var(--e5); }
.texte p + p { margin-top: var(--e4); }
.constat { margin-top: var(--e6) !important; padding-left: var(--e5); border-left: 3px solid var(--encre); color: var(--encre); font-weight: 600; }
@media (min-width: 1024px) {
  .deux-temps { grid-template-columns: 5fr 6fr; gap: var(--e7) var(--e10); align-items: start; }
}

/* Le principe et la journée */
.principe { display: grid; gap: var(--e6); align-items: center; }
.principe h2 { margin-bottom: var(--e5); }
.touches-dessin { width: min(100%, 360px); height: auto; }
.touches-dessin .touche-pro { fill: var(--pro); }
.touches-dessin .touche-prive { fill: var(--prive); }
.touches-dessin text { font-family: var(--police); font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; fill: #fff; }
.touches-legende { display: grid; gap: var(--e4); margin-top: var(--e5); }
.touches-legende dt { font-weight: 700; }
.touches-legende dt.pro { color: var(--pro); }
.touches-legende dt.prive { color: var(--prive); }
@media (min-width: 768px) { .touches-legende { grid-template-columns: 1fr 1fr; max-width: 480px; } }
@media (min-width: 1024px) { .principe { grid-template-columns: 7fr 5fr; gap: var(--e10); } }

.journee { margin-top: var(--e8); padding-top: var(--e7); border-top: 1px solid var(--filet); }
.journee-entete { display: grid; gap: var(--e3); }
.journee-entete p { max-width: 60ch; }
@media (min-width: 1024px) { .journee-entete { grid-template-columns: 5fr 7fr; gap: var(--e10); align-items: baseline; } }
.ruban { margin-top: var(--e6); }
.ruban svg { width: 100%; height: 32px; }
.ruban .piste { fill: #e7eaf0; }
.ruban .seg.pro { fill: var(--pro); }
.ruban .seg.prive { fill: var(--prive); }
.ruban .graduations line { stroke: #d3d8e0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.heures { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin-top: var(--e2); font-size: 14px; color: var(--discret); font-variant-numeric: tabular-nums; }
.heures span { white-space: nowrap; }
@media (max-width: 767px) { .heures span:nth-child(odd) { visibility: hidden; } }
.ruban-legende { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e4); font-size: 14px; color: var(--discret); }
.moments { display: grid; gap: var(--e5); margin-top: var(--e6); }
.moment { border-top: 3px solid var(--filet); padding-top: var(--e4); }
.moment.pro { border-top-color: var(--pro); }
.moment.prive { border-top-color: var(--prive); }
.moment .heure { font-size: 24px; font-weight: 700; color: var(--encre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.moment h4 { margin: var(--e2) 0 var(--e2); }
.moment h4 .etiquette { margin-left: var(--e1); }
.moment p:last-child { font-size: 16px; }
@media (min-width: 768px) { .moments { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .moments { grid-template-columns: repeat(5, 1fr); } }

/* L'appli */
.appli { display: grid; gap: var(--e6); }
.appli-texte .mention { font-size: 14px; margin-bottom: var(--e3); }
.appli-texte h2 { margin-bottom: var(--e4); }
.ecrans { display: flex; gap: var(--e4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e2); }
.ecrans li { flex: 0 0 72%; scroll-snap-align: start; }
.ecrans img { border-radius: 20px; border: 1px solid var(--filet); }
.ecrans figcaption { font-size: 14px; line-height: 1.5; margin-top: var(--e3); }
@media (min-width: 768px) {
  .ecrans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); overflow: visible; padding-bottom: 0; }
}
@media (min-width: 1024px) { .appli { grid-template-columns: 4fr 8fr; gap: var(--e8); align-items: center; } }

/* Vie privée */
.registre { display: grid; gap: var(--e5); margin-top: var(--e7); }
.colonne { background: var(--nuit-doux); border: 1px solid var(--nuit-filet); border-radius: 8px; padding: var(--e5); }
.colonne h3 { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.colonne h3 .etiquette { vertical-align: 0; }
.oui-non li { display: flex; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--nuit-filet); }
.oui-non li:last-child { border-bottom: 0; }
.icone { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone.oui { stroke: var(--nuit-encre); }
.icone.non { stroke: var(--nuit-prive); }
@media (min-width: 768px) { .registre { grid-template-columns: 1fr 1fr; } .colonne { padding: var(--e6); } }

.affirmation { margin-top: var(--e7); display: grid; gap: var(--e4); }
.affirmation-titre { font-size: clamp(24px, 1vw + 18px, 32px); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--nuit-encre); max-width: 26ch; }
.affirmation p:last-child { max-width: 65ch; }
@media (min-width: 1024px) { .affirmation { grid-template-columns: 5fr 7fr; gap: var(--e10); align-items: start; } }

.circuit-titre { margin-top: var(--e8); padding-top: var(--e7); border-top: 1px solid var(--nuit-filet); }
.circuit { display: grid; gap: var(--e2); margin-top: var(--e6); }
.noeud { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--e4); align-items: center; }
.noeud-icone { grid-row: span 2; width: 48px; height: 40px; }
.noeud-icone .trait { fill: none; stroke: var(--nuit-encre); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.noeud-icone .trait-pro, .noeud-icone .trait-prive { fill: none; stroke-width: 15; stroke-linejoin: round; }
.noeud-icone .trait-pro { stroke: var(--nuit-pro); }
.noeud-icone .trait-prive { stroke: var(--nuit-prive); }
.noeud-icone .plein-pro { fill: var(--nuit-pro); }
.noeud-icone .plein-prive { fill: var(--nuit-prive); }
.noeud-nom { color: var(--nuit-encre); font-weight: 700; }
.noeud-role { font-size: 14px; color: var(--nuit-discret); }
.liaison { display: flex; align-items: center; gap: var(--e3); padding-left: var(--e5); min-height: 48px; font-size: 14px; font-weight: 600; color: var(--nuit-texte); }
.liaison svg { order: -1; width: 32px; height: 12px; transform: rotate(90deg); fill: none; stroke: var(--nuit-discret); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (min-width: 1024px) {
  .circuit { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: var(--e4); }
  .noeud { grid-template-columns: 1fr; row-gap: var(--e1); }
  .noeud-icone { grid-row: auto; margin-bottom: var(--e3); }
  .liaison { flex-direction: column; align-items: center; gap: var(--e2); padding: 0; min-height: 0; text-align: center; }
  .liaison svg { order: 0; width: 80px; transform: none; }
}
.garanties { display: grid; gap: var(--e5); margin-top: var(--e7); }
.garanties p { max-width: 60ch; }
@media (min-width: 1024px) { .garanties { grid-template-columns: repeat(3, 1fr); gap: var(--e7); } }

/* Employeurs */
.titre-large { max-width: 22ch; }
.atouts { display: grid; gap: var(--e6); margin-top: var(--e7); }
.atout { border-top: 1px solid var(--filet); padding-top: var(--e5); }
.atout-quand { font-size: 14px; font-weight: 600; color: var(--discret); margin-bottom: var(--e2); }
.atout h3 { margin-bottom: var(--e2); }
.atout p:last-child { max-width: 52ch; }
@media (min-width: 768px) { .atouts { grid-template-columns: 1fr 1fr; gap: var(--e7) var(--e8); } }
.ecran-bureau { margin-top: var(--e8); }
.ecran-bureau img { border-radius: 8px; border: 1px solid var(--filet); }
.ecran-bureau figcaption { margin-top: var(--e4); max-width: 75ch; }
.ecran-bureau .mention { display: block; margin-bottom: var(--e1); }

/* Le boîtier */
.boitier { display: grid; gap: var(--e6); align-items: center; }
.boitier-figure figcaption { font-size: 14px; color: var(--discret); margin-top: var(--e3); max-width: 48ch; }
.caracteristiques { margin-top: var(--e5); }
.caracteristiques li { padding: var(--e4) 0; border-bottom: 1px solid var(--filet); }
.caracteristiques li:last-child { border-bottom: 0; }
.caracteristiques strong { display: block; font-size: 18px; margin-bottom: var(--e1); }
@media (min-width: 1024px) { .boitier { grid-template-columns: 6fr 5fr; gap: var(--e9); } .boitier-figure { order: -1; } }
.planche { margin-top: var(--e8); }
.planche img { border-radius: 8px; }
.planche figcaption { font-size: 14px; color: var(--discret); margin-top: var(--e3); }

/* Fin et pied de page */
.fin-grille { display: grid; gap: var(--e7); }
.fin-symbole { width: 56px; height: auto; margin-bottom: var(--e6); }
.fin h2 { max-width: none; }
.fin-contact-titre { font-size: 14px; font-weight: 600; margin-bottom: var(--e2); }
.nuit .fin-contact-titre { color: var(--nuit-discret); }
.contacts li { display: grid; justify-items: start; padding-block: var(--e3); border-top: 1px solid var(--nuit-filet); }
.contacts a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; color: var(--nuit-encre); font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contacts a:hover { text-decoration-thickness: 2px; }
@media (min-width: 1024px) { .fin-grille { grid-template-columns: 1fr auto; gap: var(--e7); align-items: end; } }

.pied { background: var(--nuit); color: var(--nuit-discret); border-top: 1px solid var(--nuit-filet); padding-block: var(--e6); font-size: 14px; }
.pied-grille { display: grid; gap: var(--e4); align-items: center; }
.pied-grille img { width: auto; height: 22px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5); }
.pied-liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--nuit-texte); text-underline-offset: 4px; }
/* Démonstration : bouton de déconnexion de la page longue. */
.bouton-deconnexion { min-height: 44px; padding: 0 var(--e4); font: inherit; color: var(--nuit-texte); background: none; border: 1px solid var(--nuit-filet); border-radius: 6px; cursor: pointer; }
.bouton-deconnexion:hover { color: var(--nuit-encre); border-color: var(--nuit-discret); }
@media (min-width: 1024px) { .pied-grille { grid-template-columns: auto 1fr auto; gap: var(--e7); } }

/* Questions fréquentes : réponses toujours visibles (pas d'accordéon), pour le lecteur comme pour les moteurs. */
.faq .question { padding-block: var(--e5); border-top: 1px solid var(--filet); }
.faq .question:first-child { padding-top: 0; border-top: 0; }
.faq h3 { margin-bottom: var(--e2); }
/* Questions : details/summary, sans script. Au-delà de 640 px toutes les réponses restent affichées (le résumé n'y est qu'un titre) ; en dessous, accordéon, une seule réponse ouverte à la fois (name="faq"). */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
@media (min-width: 640px) {
  .faq .question::details-content { content-visibility: visible; }
  .faq summary { pointer-events: none; cursor: text; }
}
.faq p { max-width: 65ch; }

/* Pages de texte : mentions légales, confidentialité, erreur */
.page-texte { padding-block: var(--e8) var(--e9); }
.page-texte h1 { font-size: clamp(32px, 1.6vw + 24px, 48px); line-height: 1.1; letter-spacing: -0.026em; }
.page-texte .chapo { max-width: 60ch; }
.page-texte h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.012em; max-width: none; margin: var(--e7) 0 var(--e3); }
.page-texte p, .coordonnees, .identite { font-size: 18px; }
.page-texte p { max-width: 65ch; }
.page-texte p + p { margin-top: var(--e3); }
.page-texte a:not(.bouton) { color: var(--encre); text-underline-offset: 3px; }
.coordonnees { font-style: normal; line-height: 1.7; margin-bottom: var(--e3); }
.identite { display: grid; gap: var(--e1); margin: var(--e4) 0; }
.identite div { display: flex; flex-wrap: wrap; gap: 0 var(--e2); }
.identite dt { color: var(--discret); }
.identite dt::after { content: " :"; }
.identite dd { color: var(--encre); font-weight: 600; }
/* Information attendue de Vincent : bien visible tant qu'elle manque (la publication la refuse). */
.a-completer { background: #fff1bf; color: #4d3800; font-weight: 600; padding: 0 var(--e1); border-radius: 2px; }
.page-texte .mise-a-jour { margin-top: var(--e8); padding-top: var(--e4); border-top: 1px solid var(--filet); font-size: 14px; color: var(--discret); }
.erreur .actions { margin-top: var(--e6); }

/* Connexion à la démonstration (demo.tragga.lu) : formulaire, et message que le serveur écrit à la place de
   <!-- message-connexion --> sous la forme <p class="message-connexion" role="alert">…</p>. */
.formulaire-connexion { display: grid; gap: var(--e2); max-width: 400px; margin-top: var(--e6); }
.formulaire-connexion label { font-weight: 600; color: var(--encre); margin-top: var(--e3); }
.formulaire-connexion input { font: inherit; font-size: 16px; min-height: 48px; padding: var(--e3) var(--e4); color: var(--encre); background: var(--fond); border: 1px solid var(--discret); border-radius: 6px; }
.formulaire-connexion .bouton { justify-self: start; margin-top: var(--e5); border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.message-connexion { padding: var(--e3) var(--e4); border-left: 3px solid var(--encre); background: var(--fond-doux); color: var(--encre); font-weight: 600; }

/* Téléphone (moins de 640 px, décision de Vincent du 10/10/2026) : hiérarchie typographique plus petite et plus aérée, et le
   boîtier remonté sous le titre pour qu'il se voie dès le premier écran. Le texte est le même ; tablette et bureau ne changent pas.
   Les zones tactiles gardent 44 à 48 px. */
@media (max-width: 639px) {
  h1 { font-size: 30px; line-height: 1.12; letter-spacing: -0.028em; }
  h2 { font-size: 26px; line-height: 1.16; letter-spacing: -0.022em; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  .texte p, .appli-texte p { font-size: 16px; line-height: 1.65; }
  .moment .heure { font-size: 20px; }
  .affirmation-titre { font-size: 22px; }
  .caracteristiques strong { font-size: 16px; }
  .contacts a { font-size: 16px; }
  .bouton, .lien-fort { font-size: 15px; }
  .hero { padding-block: var(--e4) var(--e6); }
  .hero-grille { gap: 0; }
  .hero-texte { display: contents; }
  .surtitre { order: 1; font-size: 13px; margin-bottom: var(--e2); }
  .hero h1 { order: 2; }
  .hero-figure { order: 3; margin-block: var(--e4) var(--e5); }
  .chapo { order: 4; font-size: 17px; line-height: 1.6; margin-top: 0; }
  .actions { order: 5; margin-top: var(--e5); gap: var(--e1); }
  .actions .bouton, .actions .lien-fort { width: 100%; justify-content: center; }
  .faq .question { padding-block: 0; }
  .faq .question:first-child { border-top: 1px solid var(--filet); }
  .faq .question:last-child { border-bottom: 1px solid var(--filet); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 48px; padding-block: var(--e4); cursor: pointer; }
  .faq summary h3 { margin-bottom: 0; font-size: 16px; line-height: 1.35; }
  .faq summary::after { content: "+"; flex: none; width: 24px; text-align: center; font-size: 22px; font-weight: 400; line-height: 1; color: var(--encre); }
  .faq .question[open] summary::after { content: "−"; }
  .faq .question p { padding-bottom: var(--e4); }
}

/* Animations de défilement (décision de Vincent du 10/10/2026, maquette docs/animations, cadrage docs/cadrage-animations.md).
   Tout le mouvement est dans les blocs ci-dessous : sans JavaScript, ou avec « réduire les animations », rien ne s'applique et la
   page reste exactement la page statique (aucun contenu masqué : seuls des décors attendent leur tour). Seuls transform, opacity
   et le tracé d'un trait SVG bougent : aucun décalage de mise en page. Règles de « Conformité Tragga » : tout est servi par ce site,
   aucun clignotement ni boucle, aucune animation de plus de 3 secondes, aucun son, aucun cookie. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  @keyframes trace { to { stroke-dashoffset: 0; } }
  @keyframes apparait { to { opacity: 1; } }
  @keyframes rejoint { to { opacity: 1; transform: none; } }
  @keyframes grandit { to { transform: none; } }

  /* 1. Le boîtier annoté : chaque repère se pose, son trait se trace jusqu'à son nom. */
  .annotations path { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
  .annotations circle, .annotations text { opacity: 0; }
  .hero-annote.joue .annotations path { animation: trace 1s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
  .hero-annote.joue .annotations circle, .hero-annote.joue .annotations text { animation: apparait 0.35s ease-out forwards; }
  .hero-annote.joue .annotations circle:nth-of-type(1) { animation-delay: 0.15s; }
  .hero-annote.joue .annotations circle:nth-of-type(2) { animation-delay: 0.35s; }
  .hero-annote.joue .annotations circle:nth-of-type(3) { animation-delay: 0.55s; }
  .hero-annote.joue .annotations path:nth-of-type(1) { animation-delay: 0.3s; }
  .hero-annote.joue .annotations path:nth-of-type(2) { animation-delay: 0.5s; }
  .hero-annote.joue .annotations path:nth-of-type(3) { animation-delay: 0.7s; }
  .hero-annote.joue .annotations text:nth-of-type(-n+2) { animation-delay: 1.1s; }
  .hero-annote.joue .annotations text:nth-of-type(3), .hero-annote.joue .annotations text:nth-of-type(4) { animation-delay: 1.3s; }
  .hero-annote.joue .annotations text:nth-of-type(n+5) { animation-delay: 1.5s; }

  /* 2. Deux boutons : les deux touches arrivent chacune de leur côté et se rejoignent. */
  .touches-dessin .touche-pro, .touches-dessin .touche-prive, .touches-dessin text { opacity: 0; transform-box: fill-box; }
  .touches-dessin .touche-pro { transform: translateX(-28px); }
  .touches-dessin .touche-prive { transform: translateX(28px); }
  .touches.joue .touche-pro, .touches.joue .touche-prive { animation: rejoint 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .touches.joue .touche-prive { animation-delay: 0.12s; }
  .touches.joue .touches-dessin text { animation: apparait 0.4s 0.7s ease-out forwards; }

  /* 3. Une journée : les trajets se posent sur la frise dans l'ordre de la journée, et leurs filets de couleur se tracent. */
  .ruban .seg { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
  .journee.joue .seg { animation: grandit 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .journee.joue .seg:nth-of-type(2) { animation-delay: 0.1s; }
  .journee.joue .seg:nth-of-type(3) { animation-delay: 0.5s; }
  .journee.joue .seg:nth-of-type(4) { animation-delay: 0.9s; }
  .journee.joue .seg:nth-of-type(5) { animation-delay: 1s; }
  .journee.joue .seg:nth-of-type(6) { animation-delay: 1.3s; }
  .journee.joue .seg:nth-of-type(7) { animation-delay: 1.8s; }

  /* 4. Ce qui est enregistré, et ce qui ne l'est pas : les coches se tracent, la croix en dernier ;
        puis les flèches du trajet de l'information, l'une après l'autre. */
  .oui-non .icone path { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .registre.joue .oui-non .icone path { animation: trace 0.45s ease-out forwards; }
  .registre.joue .oui-non li:nth-child(1) .icone path { animation-delay: 0.1s; }
  .registre.joue .oui-non li:nth-child(2) .icone path { animation-delay: 0.3s; }
  .registre.joue .oui-non li:nth-child(3) .icone path { animation-delay: 0.5s; }
  .registre.joue .oui-non li:nth-child(4) .icone path { animation-delay: 0.7s; }
  .registre.joue .oui-non li.jamais .icone path { animation-delay: 1.1s; }
  .liaison svg path { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .circuit.joue .liaison svg path { animation: trace 0.5s ease-out forwards; }
  .circuit.joue .liaison:nth-child(2) svg path { animation-delay: 0.2s; }
  .circuit.joue .liaison:nth-child(4) svg path { animation-delay: 0.7s; }
  .circuit.joue .liaison:nth-child(6) svg path { animation-delay: 1.2s; }

  /* 5. Filets qui se tracent : chaque filet de la page se trace dans son sens (journée, quatre atouts, questions, constat).
        Le filet d'origine devient transparent ; un trait posé dessus se déploie. */
  .moment, .moment.pro, .moment.prive, .atout, .faq .question { border-top-color: transparent; position: relative; }
  .moment::before, .atout::before, .faq .question:not(:first-child)::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; top: -1px; background: var(--filet); transform: scaleX(0); transform-origin: left; }
  .moment::before { height: 3px; top: -3px; }
  .moment.pro::before { background: var(--pro); }
  .moment.prive::before { background: var(--prive); }
  .journee.joue .moment::before, .atouts.joue .atout::before, .faq.joue .question::before { animation: grandit 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .journee.joue .moment:nth-child(1)::before { animation-delay: 0.1s; }
  .journee.joue .moment:nth-child(2)::before { animation-delay: 0.45s; }
  .journee.joue .moment:nth-child(3)::before { animation-delay: 0.8s; }
  .journee.joue .moment:nth-child(4)::before { animation-delay: 1.7s; }
  .journee.joue .moment:nth-child(5)::before { animation-delay: 2s; }
  .atouts.joue .atout:nth-child(2)::before { animation-delay: 0.15s; }
  .atouts.joue .atout:nth-child(3)::before { animation-delay: 0.3s; }
  .atouts.joue .atout:nth-child(4)::before { animation-delay: 0.45s; }
  .faq.joue .question:nth-child(3)::before { animation-delay: 0.1s; }
  .faq.joue .question:nth-child(4)::before { animation-delay: 0.2s; }
  .faq.joue .question:nth-child(5)::before { animation-delay: 0.3s; }
  .faq.joue .question:nth-child(6)::before { animation-delay: 0.4s; }
  .constat { border-left-color: transparent; position: relative; }
  .constat::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--encre); transform: scaleY(0); transform-origin: top; }
  .constat.joue::before { animation: grandit 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards; }

  /* 6. Transitions entre sections : un filet de chapitre se trace sur toute la largeur en haut de chaque section. */
  .section { position: relative; }
  .section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--filet); transform: scaleX(0); transform-origin: left; pointer-events: none; }
  .section.nuit::before { background: var(--nuit-filet); }
  .section.joue::before { animation: grandit 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

  /* 7. Point final : les deux moitiés du symbole se rejoignent, comme les deux touches du début. */
  .fin-symbole .g-gauche, .fin-symbole .g-droit { opacity: 0; }
  .fin-symbole .g-gauche { transform: translateX(-24px); }
  .fin-symbole .g-droit { transform: translateX(24px); }
  .fin-symbole.joue .g-gauche, .fin-symbole.joue .g-droit { animation: rejoint 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .fin-symbole.joue .g-droit { animation-delay: 0.15s; }

  /* 8. Survols vivants : le bouton se soulève, les liens de contact avancent, le lien actif de la navigation se souligne. */
  .bouton { transition: transform 0.15s ease-out, background-color 0.15s; }
  .bouton:hover { transform: translateY(-2px); }
  .bouton:active { transform: none; }
  .contacts a, .pied-liens a { transition: transform 0.15s ease-out; }
  .contacts a:hover, .pied-liens a:hover { transform: translateX(4px); }
  @media (min-width: 1024px) {
    .navigation a:not(.nav-contact) { position: relative; }
    .navigation a:not(.nav-contact):hover { text-decoration: none; }
    .navigation a:not(.nav-contact)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--encre); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .navigation a:not(.nav-contact):hover::after, .navigation a[aria-current]::after { transform: none; }
  }
}

/* 9. Parallaxe et écrans qui montent : défilement lié, sans JavaScript, seulement où le navigateur sait le faire. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Le boîtier de l'accroche monte un peu moins vite que la page quand on la quitte. */
    @keyframes monte { to { transform: translateY(-48px); } }
    .hero-figure { animation: monte linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    /* La vue de profil du boîtier traverse l'écran à contre-courant du texte. */
    @keyframes derive { from { transform: translateY(36px); } to { transform: translateY(-36px); } }
    .boitier-figure img { animation: derive linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* Les photos de la voiture se posent. */
    @keyframes leve { from { transform: translateY(48px); } to { transform: none; } }
    .planche img { animation: leve linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    /* Les trois écrans de l'appli montent chacun à leur vitesse : le soir, les trajets, le motif, la validation. */
    @media (min-width: 768px) {
      @keyframes monte-ecran { from { transform: translateY(var(--decalage)); } to { transform: none; } }
      .ecrans li { animation: monte-ecran linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
      .ecrans li:nth-child(1) { --decalage: 40px; }
      .ecrans li:nth-child(2) { --decalage: 80px; }
      .ecrans li:nth-child(3) { --decalage: 120px; }
    }
  }
}

/* Impression, PDF et captures de page entière : aucune animation ne se joue, tous les décors sont à leur état final. */
@media print {
  .annotations path, .oui-non .icone path, .liaison svg path { stroke-dashoffset: 0 !important; animation: none !important; }
  .annotations circle, .annotations text, .touches-dessin .touche-pro, .touches-dessin .touche-prive, .touches-dessin text,
  .fin-symbole .g-gauche, .fin-symbole .g-droit { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ruban .seg, .moment::before, .atout::before, .faq .question::before, .constat::before, .section::before,
  .hero-figure, .boitier-figure img, .planche img, .ecrans li { transform: none !important; animation: none !important; }
}