/* =========================================================================
   MAIN — mise en page et composants. Mobile d'abord.

   Aucune couleur écrite en dur : tout passe par les variables de tokens.css.
   Plan du fichier :
     1.  Socle et typographie
     2.  Utilitaires et accessibilité
     3.  Boutons et liens
     4.  Barre de navigation
     5.  Sélecteur de langue
     6.  Hero
     7.  Bifurcation
     8.  Ossature des sections + sommaire collant
     9.  L'ANNOTATION EN MARGE — l'élément signature
     10. Cartes, listes, lexique
     11. Frise « quand l'appeler »
     12. Parcours de Luc Morin
     13. Déroulé d'une mission
     15. Zone d'intervention
     16. Honoraires
     17. FAQ — onglets et accordéons
     18. Contact et formulaire
     19. Pied de page
     20. Animations d'apparition
     21. Impression
   ========================================================================= */

/* =========================================================================
   1. SOCLE ET TYPOGRAPHIE
   ========================================================================= */

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: var(--i-texte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Chiffres à chasse fixe partout : dans un document qui aligne des
     données, des chiffres de largeurs différentes sautent aux yeux. */
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--encre);
}

h4, h5, h6 {
  font-family: var(--f-texte);
  font-weight: 600;
  color: var(--encre);
}

h1 { font-size: var(--t-h1); line-height: var(--i-titre); }
h2 { font-size: var(--t-h2); line-height: var(--i-titre); }
h3 { font-size: var(--t-h3); line-height: var(--i-h3); }
h4 { font-size: var(--t-h4); line-height: var(--i-serre); }

/* Titres de cartes.
   Dans les sections 03 et 05, aucun sous-titre ne s'intercale entre le
   titre de section et les cartes : ces titres doivent donc être des <h3>,
   sous peine de sauter un niveau de hiérarchie. Ils gardent en revanche
   l'allure d'un h4 — corps du texte, sans empattement — parce qu'ils
   intitulent une carte, pas une partie du document. */
.temps h3,
.etapes h3 {
  font-family: var(--f-texte);
  font-size: var(--t-h4);
  line-height: var(--i-serre);
  font-weight: 600;
  letter-spacing: 0;
}

p { max-width: var(--mesure); }

strong { font-weight: 600; }

/* Toute donnée passe en monospace : montants, durées, dates, références.
   C'est la règle typographique centrale du site. */
.donnee,
.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  font-feature-settings: 'zero' 1; /* zéro barré : on lit un chiffre, pas un O */
  letter-spacing: -0.01em;
}

/* Marque d'emplacement à remplir avant mise en ligne. Volontairement
   très visible : il ne doit pas être possible de publier sans les voir. */
.afournir {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.92em;
  background: #fdf3d6;      /* jaune de surligneur — hors palette, à dessein */
  color: #6b4e0e;
  border-bottom: 1.5px dashed #c99b1f;
  padding: 0.05em 0.34em;
  border-radius: var(--r-1);
  white-space: nowrap;
}

/* =========================================================================
   2. UTILITAIRES ET ACCESSIBILITÉ
   ========================================================================= */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--large { max-width: var(--largeur-large); }

/* Masqué à l'écran, lu par les lecteurs d'écran. */
.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement — premier élément focusable de la page. */
.evitement {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 200;
  background: var(--encre);
  color: var(--papier);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-2);
  font-size: var(--t-petit);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--transition);
}
.evitement:focus-visible { transform: translateY(0); }

/* Focus clavier — visible partout, jamais supprimé. */
:focus-visible {
  outline: var(--focus) solid var(--ardoise);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.filet {
  border: 0;
  border-top: 1px solid var(--filet);
  margin-block: var(--e-6);
}

/* =========================================================================
   3. BOUTONS ET LIENS
   ========================================================================= */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.8em 1.5em;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
  text-align: center;
}

.bouton--primaire {
  background: var(--ardoise);
  color: var(--surface);
  border-color: var(--ardoise);
}
.bouton--primaire:hover { background: var(--ardoise-fonce); border-color: var(--ardoise-fonce); }

.bouton--second {
  background: var(--surface);
  color: var(--ardoise);
  border-color: var(--filet);
}
.bouton--second:hover { border-color: var(--ardoise); background: var(--ardoise-voile); }

.bouton .ico { width: 1.05em; height: 1.05em; flex: none; }

/* Lien courant dans le texte. */
.lien {
  color: var(--ardoise);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ardoise) 40%, transparent);
  transition: text-decoration-color var(--transition);
}
.lien:hover { text-decoration-color: currentColor; }

/* Lien d'ancre avec flèche, utilisé par la bifurcation. */
.lien-ancre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--ardoise);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--t-petit);
}
.lien-ancre::after {
  content: '';
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background: currentColor;
  /* Flèche dessinée en masque : pas de fichier, pas de requête. */
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
  transition: transform var(--transition);
}
.lien-ancre:hover::after { transform: translateX(3px); }

:root {
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* =========================================================================
   4. BARRE DE NAVIGATION
   ========================================================================= */

.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.barre.est-defilee { border-bottom-color: var(--filet); }

.barre__int {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  max-width: var(--largeur-large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* --- Logo : marque en SVG + lettrage en vrai texte --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--encre);
  flex: none;
  margin-right: auto;
}
.logo__marque { width: 26px; height: 26px; flex: none; color: var(--ardoise); }
.logo__mot {
  display: flex;
  flex-direction: column;
  line-height: 1.04;
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.logo__mot b { font-weight: 600; }
.logo__mot span { font-weight: 400; color: var(--texte-2); }

/* --- Sommaire central (grand écran seulement) --- */
.barre__nav { display: none; }

@media (min-width: 1100px) {
  .barre__nav {
    display: flex;
    gap: var(--e-5);
    align-items: center;
  }
  .barre__nav a {
    font-size: var(--t-petit);
    text-decoration: none;
    color: var(--texte-2);
    transition: color var(--transition);
    white-space: nowrap;
  }
  .barre__nav a:hover { color: var(--encre); }
}

.barre__droite {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-left: auto;
  flex: none;
}

/* Le téléphone reste visible en permanence, y compris sur mobile.
   Sous 560 px il ne garde que l'icône et le numéro compacté. */
.barre__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-petit);
  color: var(--encre);
  text-decoration: none;
  padding: 0.45em 0.7em;
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  background: var(--surface);
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}
.barre__tel:hover { border-color: var(--ardoise); background: var(--ardoise-voile); }
.barre__tel .ico { width: 15px; height: 15px; flex: none; color: var(--ardoise); }

@media (max-width: 559px) {
  .barre__tel { padding: 0.45em 0.6em; }
  .barre__tel span { font-size: 0.8125rem; letter-spacing: -0.03em; }
}

/* --- Compactage de la barre sur petits écrans ---
   Contrainte : le numéro de téléphone reste affiché EN ENTIER à toutes les
   largeurs, jusqu'à 320 px. C'est le premier moyen de contact du cabinet ;
   il ne doit jamais être réduit à une icône. Ce sont donc les autres
   éléments qui cèdent de la place, dans cet ordre. */

/* 1. Le lettrage du logo s'efface, la marque seule suffit à identifier. */
@media (max-width: 599px) {
  .logo__mot { display: none; }
}

/* 2. Les gouttières se resserrent et le chevron du sélecteur disparaît :
      le bouton reste explicite avec son seul code de langue. */
@media (max-width: 399px) {
  .barre__int { gap: var(--e-2); }
  .barre__droite { gap: var(--e-2); }
  .barre__tel { padding: 0.4em 0.45em; }
  .langues__bouton { padding: 0.45em 0.5em; }
  .langues__bouton .chevron { display: none; }
  .burger { width: 34px; }

  /* Le drapeau remplace le code : il occupe la même largeur, et le code
     reste lu par les lecteurs d'écran plutôt que d'être simplement masqué.
     Un drapeau seul ne désigne pas une langue — l'information textuelle ne
     doit pas disparaître pour autant. */
  .langues__bouton #langue-active {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 3. En dessous de 360 px, le téléphone perd son cadre et devient un lien
      simple : on récupère ainsi les derniers pixels sans toucher ni au
      numéro ni à son icône. Vérifié à 320 px, la largeur la plus étroite
      que le site doit tenir. */
@media (max-width: 359px) {
  .barre__int { gap: 6px; }
  .barre__droite { gap: 6px; }
  .barre__tel {
    padding: 0;
    border-color: transparent;
    background: none;
  }
  .barre__tel:hover { background: none; }
  .langues__bouton { padding: 0.4em 0.4em; }
  .burger { width: 30px; }
}

/* --- Bouton menu (petits écrans) --- */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre);
  flex: none;
}
.burger .ico { width: 17px; height: 17px; }
.burger__fermer { display: none; }
.burger[aria-expanded='true'] .burger__ouvrir { display: none; }
.burger[aria-expanded='true'] .burger__fermer { display: block; }

@media (min-width: 1100px) { .burger { display: none; } }

/* --- Panneau du menu déroulant (petits écrans) --- */
.menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  padding: var(--e-4) var(--gouttiere) var(--e-6);
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  /* Fermé par défaut : masqué au clavier comme à l'écran. */
  display: none;
}
.menu.est-ouvert { display: block; }
@media (min-width: 1100px) { .menu, .menu.est-ouvert { display: none; } }

.menu__liste { list-style: none; }
.menu__liste li + li { border-top: 1px solid var(--filet); }
.menu__liste a {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--encre);
  font-size: var(--t-base);
}
.menu__liste .num {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  color: var(--ardoise);
  flex: none;
}

/* =========================================================================
   5. SÉLECTEUR DE LANGUE
   ========================================================================= */

.langues { position: relative; flex: none; }

/* Un drapeau garde ses proportions et reçoit un filet : sans lui, le blanc
   du drapeau français se confond avec le fond blanc du bouton. */
.drapeau {
  width: 20px;
  height: 14px;
  flex: none;
  display: block;
  border: 1px solid var(--filet);
  border-radius: 1px;
}

.langues__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45em 0.6em;
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  background: var(--surface);
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--encre);
  transition: border-color var(--transition);
}
.langues__bouton:hover { border-color: var(--ardoise); }
.langues__bouton .chevron {
  width: 11px;
  height: 11px;
  color: var(--texte-2);
  transition: transform var(--transition);
}
.langues__bouton[aria-expanded='true'] .chevron { transform: rotate(180deg); }

.langues__liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: var(--e-1);
  list-style: none;
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--encre) 30%, transparent);
  display: none;
}
.langues__liste.est-ouverte { display: block; }

.langues__liste button {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-1);
  font-size: var(--t-petit);
  color: var(--encre);
  text-align: left;
  transition: background var(--transition);
}
.langues__liste button:hover { background: var(--ardoise-voile); }
.langues__liste button[aria-current='true'] { font-weight: 600; }
.langues__liste .code {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--ardoise);
  width: 2ch;
  flex: none;
}

/* =========================================================================
   6. HERO
   ========================================================================= */

.hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 5vw, 5.5rem));
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--filet);
  background: var(--surface);
}

.hero__grille {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}
@media (min-width: 980px) {
  .hero__grille { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
}

.hero__etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: var(--e-4);
}
.hero__etiquette::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--ardoise);
}

.hero h1 { margin-bottom: var(--e-4); max-width: 17ch; }

.hero__chapo {
  font-size: var(--t-lead);
  color: var(--texte-2);
  line-height: 1.5;
  max-width: 54ch;
  margin-bottom: var(--e-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.hero__note {
  font-size: var(--t-petit);
  color: var(--texte-2);
  max-width: 46ch;
}

/* --- Encadré du chiffre 37 M€ ---
   Le seul chiffre clé de la page. Sa mention exacte l'accompagne toujours :
   c'est un dossier traité, jamais une moyenne ni une promesse. */
.reperes {
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  background: var(--papier);
  padding: var(--e-5);
}

.repere__valeur {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-cle);
  line-height: 1;
  color: var(--encre);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--e-3);
}

.repere__intitule {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
  display: block;
  margin-bottom: var(--e-2);
}

.repere__mention {
  font-size: var(--t-mini);
  color: var(--texte-2);
  line-height: 1.5;
  max-width: none;
}

.reperes__sep { margin-block: var(--e-4); }

.reperes__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  font-size: var(--t-petit);
  padding-block: 0.35rem;
}
.reperes__ligne + .reperes__ligne { border-top: 1px solid var(--filet); }
.reperes__ligne dt { color: var(--texte-2); }
.reperes__ligne dd {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-mini);
  color: var(--encre);
  text-align: right;
}

/* =========================================================================
   7. BIFURCATION — deux publics, deux portes
   ========================================================================= */

.bifurcation {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--filet);
}

.bifurcation__intro {
  font-size: var(--t-petit);
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin-bottom: var(--e-5);
}

.bifurcation__grille {
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 760px) {
  .bifurcation__grille { grid-template-columns: 1fr 1fr; gap: var(--e-5); }
}

.porte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  transition: border-color var(--transition);
}
.porte:hover { border-color: var(--ardoise); }

.porte__pico {
  width: 30px;
  height: 30px;
  color: var(--ardoise);
  margin-bottom: var(--e-4);
}

.porte h3 { margin-bottom: var(--e-3); }

.porte__liste {
  list-style: none;
  margin-bottom: var(--e-5);
  flex: 1;
}
.porte__liste li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-petit);
  color: var(--texte-2);
  line-height: 1.55;
}
.porte__liste li + li { margin-top: 0.55rem; }
.porte__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--ardoise);
}

/* =========================================================================
   8. OSSATURE DES SECTIONS + SOMMAIRE COLLANT
   ========================================================================= */

.corps {
  max-width: var(--largeur-large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

@media (min-width: 1100px) {
  .corps {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: start;
  }
}

/* --- Sommaire latéral, grand écran uniquement --- */
.sommaire { display: none; }

@media (min-width: 1100px) {
  .sommaire {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + var(--e-6));
    padding-top: var(--section-y);
  }
  .sommaire__titre {
    font-family: var(--f-mono);
    font-size: var(--t-mini);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-2);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--filet);
    margin-bottom: var(--e-3);
  }
  .sommaire__liste { list-style: none; }
  .sommaire__lien {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.42rem 0;
    padding-left: 0.6rem;
    border-left: 2px solid transparent;
    font-size: var(--t-petit);
    line-height: 1.35;
    color: var(--texte-2);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
  }
  .sommaire__lien .num {
    font-family: var(--f-mono);
    font-size: var(--t-mini);
    font-weight: 500;
    flex: none;
    opacity: 0.65;
  }
  .sommaire__lien:hover { color: var(--encre); }
  .sommaire__lien.est-actif {
    color: var(--encre);
    font-weight: 600;
    border-left-color: var(--ardoise);
  }
  .sommaire__lien.est-actif .num { color: var(--ardoise); opacity: 1; }
}

/* --- Une section numérotée --- */
.section {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--filet);
}
.section:last-of-type { border-bottom: 0; }

.section__entete { margin-bottom: var(--e-7); }

.section__num {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-num);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ardoise);
  margin-bottom: var(--e-3);
}

/* Le soulignement se trace sous le titre à l'entrée dans l'écran. */
.section__titre { position: relative; padding-bottom: var(--e-4); }
.section__titre::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 2px;
  background: var(--ardoise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-lente) 120ms;
}
.section.est-visible .section__titre::after { transform: scaleX(1); }

.section__chapo {
  font-size: var(--t-lead);
  color: var(--texte-2);
  line-height: 1.55;
  margin-top: var(--e-4);
  max-width: 58ch;
}

.section__corps > * + * { margin-top: var(--e-5); }

/* =========================================================================
   9. L'ANNOTATION EN MARGE — L'ÉLÉMENT SIGNATURE

   ⚠ COMPOSANT ACTUELLEMENT INUTILISÉ — CONSERVÉ À DESSEIN.

   Il vivait dans la section « Dossiers traités », retirée du site parce
   qu'elle ne reposait que sur des exemples. Il n'y a donc plus, aujourd'hui,
   d'endroit où le site compare une proposition et un résultat.

   Le composant est gardé prêt à l'emploi : le jour où des dossiers réels
   seront disponibles, il suffit de recoller le bloc HTML donné dans le
   README (section 7) pour retrouver l'effet, sans le reconstruire.
   Si vous décidez de ne jamais afficher de montants, supprimez cette
   section 9 entière ainsi que --correction dans tokens.css.
   -------------------------------------------------------------------------
   Principe : le montant de la compagnie est barré d'un trait fin qui se
   trace, et le montant obtenu s'inscrit à côté, en rouge et en monospace —
   une correction portée à la marge d'un rapport.

   Le rouge (--correction) n'apparaît QUE dans ce composant.
   ========================================================================= */

.correction {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
}

.correction__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
}

.correction__intitule {
  font-size: var(--t-petit);
  color: var(--texte-2);
  line-height: 1.35;
}

.correction__montant {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-montant);
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-left: auto;
}

/* --- Le montant proposé, et son trait de rature --- */
.correction__montant--propose {
  position: relative;
  color: var(--texte-2);
}
.correction__montant--propose::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  top: 52%;
  height: 1.5px;
  background: var(--correction);
  transform: scaleX(0);
  transform-origin: left center;
  /* Le trait se trace une seule fois, à l'entrée dans l'écran. */
  transition: transform 520ms cubic-bezier(0.5, 0, 0.2, 1);
}
.est-visible .correction__montant--propose::after { transform: scaleX(1); }

/* --- Le montant obtenu : la correction --- */
.correction__ligne--obtenu { position: relative; padding-top: var(--e-3); }
.correction__ligne--obtenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--filet);
}

.correction__montant--obtenu {
  color: var(--correction);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 380ms ease 560ms, translate 380ms ease 560ms;
}
.est-visible .correction__montant--obtenu { opacity: 1; translate: 0 0; }

/* La petite main de correction : un chevron rouge qui pointe le montant. */
.correction__montant--obtenu::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.4em;
  vertical-align: -0.03em;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
}

.correction__note {
  font-size: var(--t-mini);
  color: var(--texte-2);
  line-height: 1.45;
  max-width: none;
}

/* Emplacements à remplir DANS le composant de correction.
   Le surlignage jaune de .afournir masquerait le rouge du montant corrigé
   et ferait disparaître l'effet signature. Ici, l'emplacement se signale
   par le seul soulignement tireté, et la couleur du montant est conservée.
   La section porte déjà un encadré « Contenus provisoires » : le marquage
   ne se perd pas.

   Aucune règle de couleur ici : .afournir et .correction__montant--* ont la
   même spécificité, et les secondes sont déclarées plus haut dans cette même
   section, donc elles l'emportent. Le montant corrigé reste rouge, le montant
   proposé reste gris. Ne pas ajouter de color: ici, cela casserait l'effet. */
.correction .afournir {
  background: none;
  border-bottom-color: currentColor;
  padding-inline: 0;
}

/* Mouvement réduit : tout est déjà dans son état final, le trait est tracé
   et le montant corrigé visible. La comparaison reste lisible. */
@media (prefers-reduced-motion: reduce) {
  .correction__montant--propose::after { transform: scaleX(1); }
  .correction__montant--obtenu { opacity: 1; translate: 0 0; }
  .section__titre::after { transform: scaleX(1); }
}

/* =========================================================================
   10. CARTES, LISTES, LEXIQUE
   ========================================================================= */

.grille {
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 700px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
}

.carte h4 { margin-bottom: var(--e-2); }
.carte p { font-size: var(--t-petit); color: var(--texte-2); max-width: none; }

/* --- Liste d'apports : un filet, un intitulé, une explication --- */
.apports { list-style: none; }
.apports li {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--filet);
  display: grid;
  gap: var(--e-1);
}
.apports li:last-child { border-bottom: 1px solid var(--filet); }
.apports__titre { font-weight: 600; font-size: var(--t-base); }
.apports__texte { font-size: var(--t-petit); color: var(--texte-2); max-width: 62ch; }

@media (min-width: 800px) {
  .apports li { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-5); align-items: baseline; }
}

/* --- Étiquettes : types de dossiers, natures de sinistres --- */
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
}
.etiquettes li {
  font-size: var(--t-petit);
  padding: 0.34em 0.75em;
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre);
}

/* --- Lexique : un terme, sa définition. Première apparition obligatoire. --- */
.lexique {
  background: var(--ardoise-voile);
  border: 1px solid var(--filet);
  border-left: 2px solid var(--ardoise);
  border-radius: var(--r-2);
  padding: var(--e-5);
}
.lexique__titre {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: var(--e-3);
}
.lexique dl { display: grid; gap: var(--e-3); }
.lexique dt { font-weight: 600; font-size: var(--t-petit); }
.lexique dd { font-size: var(--t-petit); color: var(--texte-2); line-height: 1.55; }

/* --- Encadré d'avertissement (contenus provisoires) --- */
.avertissement {
  border: 1px dashed #c99b1f;
  background: #fdf9ec;
  border-radius: var(--r-2);
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-petit);
  color: #6b4e0e;
}
.avertissement p { max-width: none; color: inherit; }
.avertissement strong { color: inherit; }

/* =========================================================================
   11. FRISE « QUAND L'APPELER »
   ========================================================================= */

.frise { display: grid; gap: var(--e-4); counter-reset: temps; }
@media (min-width: 900px) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
}

.temps {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
}

@media (min-width: 900px) {
  /* Sur grand écran, les trois temps forment une frise continue :
     un seul filet entre eux, pas trois cartes séparées. */
  .frise .temps { border-radius: 0; margin-left: -1px; }
  .frise .temps:first-child { border-radius: var(--r-2) 0 0 var(--r-2); margin-left: 0; }
  .frise .temps:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }
}

/* La ligne de temps, au-dessus du titre. */
.temps__jalon {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}
.temps__puce {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ardoise);
  background: var(--surface);
}
.temps__trait { flex: 1; height: 1px; background: var(--filet); }
.temps__moment {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
  /* Doit pouvoir se replier : en monospace et en capitales, un libellé comme
     « PENDANT L'EXPERTISE CONTRADICTOIRE » dépasse 260 px. En flex: none il
     élargissait tout le document sous 360 px, et la barre fixe suivait. */
  flex: 0 1 auto;
  min-width: 0;
}

.temps h3 { margin-bottom: var(--e-3); }
.temps p { font-size: var(--t-petit); color: var(--texte-2); max-width: none; }

.temps__perte {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
  font-size: var(--t-mini);
  color: var(--texte-2);
}
.temps__perte b { color: var(--encre); font-weight: 600; }

/* =========================================================================
   12. PARCOURS DE LUC MORIN
   ========================================================================= */

.parcours__tete { display: grid; gap: var(--e-5); margin-bottom: var(--e-7); }
@media (min-width: 900px) {
  .parcours__tete { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: var(--e-7); }
}

/* L'argument central, mis en évidence sans emphase commerciale. */
.parcours__these {
  border-left: 2px solid var(--ardoise);
  padding-left: var(--e-5);
}
.parcours__these p {
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: 1.4;
  color: var(--encre);
  max-width: 40ch;
}

.fiche {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: var(--e-5);
}
.fiche__titre {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-2);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--e-3);
}
.fiche dl { display: grid; gap: var(--e-3); }
.fiche dt {
  font-size: var(--t-mini);
  color: var(--texte-2);
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}
.fiche dd { font-size: var(--t-petit); font-weight: 600; }

/* --- La chronologie --- */
.chrono { list-style: none; position: relative; }

.chrono li {
  position: relative;
  padding-left: var(--e-6);
  padding-bottom: var(--e-6);
}
.chrono li:last-child { padding-bottom: 0; }

/* Le fil vertical. */
.chrono li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.75rem;
  bottom: -0.75rem;
  width: 1px;
  background: var(--filet);
}
.chrono li:last-child::before { display: none; }

/* Le repère sur le fil. */
.chrono li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ardoise);
  background: var(--papier);
}

.chrono__etape {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: var(--e-2);
}
.chrono h4 { margin-bottom: var(--e-2); }
.chrono p { font-size: var(--t-petit); color: var(--texte-2); }

/* =========================================================================
   13. DÉROULÉ D'UNE MISSION
   ========================================================================= */

.etapes { list-style: none; counter-reset: etape; }

.etapes li {
  counter-increment: etape;
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5) 0;
  border-top: 1px solid var(--filet);
}
.etapes li:last-child { border-bottom: 1px solid var(--filet); }

@media (min-width: 820px) {
  /* Deux colonnes : le numéro, puis l'étape. La troisième colonne portait un
     délai indicatif, retiré du site — le déroulé décrit un ordre, pas un
     calendrier. */
  .etapes li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--e-5);
    align-items: start;
  }
}

.etapes__num {
  font-family: var(--f-mono);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--ardoise);
  line-height: 1.1;
}
.etapes__num::before { content: '0' counter(etape); }

.etapes h3 { margin-bottom: var(--e-2); }
.etapes p { font-size: var(--t-petit); color: var(--texte-2); max-width: 60ch; }

/* =========================================================================
   15. ZONE D'INTERVENTION
   ========================================================================= */

.zone { display: grid; gap: var(--e-6); }
@media (min-width: 900px) {
  .zone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--e-7); }
}

.carte-zone {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: var(--e-5);
}
.carte-zone svg { width: 100%; height: auto; }

/* Les pays couverts et les autres, dans la carte SVG. */
.pays-actif { fill: var(--ardoise-voile); stroke: var(--ardoise); stroke-width: 1.1; }
.pays-inactif { fill: var(--papier); stroke: var(--filet); stroke-width: 1; }
.pays-nom { fill: var(--ardoise); font-family: var(--f-mono); font-size: 11px; font-weight: 500; }

/* Le siège, en Andorre. Marqué d'un point plein plutôt que d'un contour :
   à cette échelle le pays mesure environ 3 px, il ne peut pas être dessiné.
   Le point est en encre, plus soutenu que l'ardoise des pays desservis :
   c'est un lieu précis, pas une zone. */
.siege circle { fill: var(--encre); }
.siege path { stroke: var(--encre); stroke-width: 1; }
.siege text {
  fill: var(--encre);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
}

/* Le siège en tête de liste, distingué du reste par sa graisse. */
.zone__siege { font-weight: 600; }
.zone__siege .code { color: var(--encre); }

.zone__liste { list-style: none; display: grid; gap: 0; }
.zone__liste li {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: 0.62rem 0;
  border-top: 1px solid var(--filet);
  font-size: var(--t-petit);
}
.zone__liste li:last-child { border-bottom: 1px solid var(--filet); }
.zone__liste .code {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--ardoise);
  flex: none;
  width: 2.5ch;
}

/* =========================================================================
   16. HONORAIRES
   ========================================================================= */

/* La section n'affiche ni tarif, ni grille, ni mode de calcul : elle expose
   un principe et les facteurs de complexité. Elle réutilise donc .lexique
   pour le principe et .apports pour les facteurs — aucun composant propre
   n'est nécessaire. */

/* La gratuité de la première analyse, mise en avant sobrement. */
.gratuite {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  background: var(--ardoise-voile);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: var(--e-5);
}
.gratuite .ico { width: 22px; height: 22px; flex: none; color: var(--ardoise); margin-top: 2px; }
.gratuite p { max-width: none; font-size: var(--t-petit); }

/* =========================================================================
   17. FAQ — ONGLETS ET ACCORDÉONS
   ========================================================================= */

.onglets {
  display: inline-flex;
  gap: var(--e-1);
  padding: var(--e-1);
  background: var(--ardoise-voile);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  margin-bottom: var(--e-6);
}
.onglet {
  padding: 0.5em 1.1em;
  border-radius: var(--r-1);
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte-2);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.onglet[aria-selected='true'] {
  background: var(--surface);
  color: var(--encre);
  font-weight: 600;
  box-shadow: 0 1px 2px -1px color-mix(in srgb, var(--encre) 24%, transparent);
}

.faq__panneau[hidden] { display: none; }

.faq__liste { list-style: none; border-top: 1px solid var(--filet); }
.faq__liste li { border-bottom: 1px solid var(--filet); }

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  padding: var(--e-5) 0;
  text-align: left;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--encre);
}
.faq__question .signe {
  position: relative;
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 0.42em;
}
/* Un plus qui devient un moins : deux traits, un seul pivote. */
.faq__question .signe::before,
.faq__question .signe::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ardoise);
}
.faq__question .signe::after {
  transform: rotate(90deg);
  transition: transform var(--transition-lente);
}
.faq__question[aria-expanded='true'] .signe::after { transform: rotate(0deg); }

.faq__reponse {
  overflow: hidden;
  /* L'accordéon anime sa hauteur via grid-template-rows : c'est la seule
     façon d'obtenir un pliage souple sans connaître la hauteur à l'avance. */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-lente);
}
.faq__reponse > div { overflow: hidden; }
.faq__question[aria-expanded='true'] + .faq__reponse { grid-template-rows: 1fr; }

.faq__reponse p {
  font-size: var(--t-petit);
  color: var(--texte-2);
  padding-bottom: var(--e-5);
  max-width: 66ch;
}
.faq__reponse p + p { padding-top: var(--e-3); }

/* =========================================================================
   18. CONTACT ET FORMULAIRE
   ========================================================================= */

.contact { display: grid; gap: var(--e-7); }
@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--e-8); align-items: start; }
}

/* Le téléphone, très gros et cliquable. C'est le premier moyen de contact. */
.tel-geant {
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-tel);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--encre);
  text-decoration: none;
  margin-block: var(--e-3) var(--e-2);
  border-bottom: 2px solid var(--filet);
  padding-bottom: 0.08em;
  transition: border-color var(--transition), color var(--transition);
  /* Le numéro ne doit jamais se couper en deux lignes. */
  white-space: nowrap;
}
.tel-geant:hover { color: var(--ardoise); border-bottom-color: var(--ardoise); }

.contact__intitule {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-2);
}

.contact__email {
  font-family: var(--f-mono);
  font-size: var(--t-petit);
  color: var(--ardoise);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  overflow-wrap: anywhere;
}
.contact__email:hover { border-bottom-color: var(--ardoise); }

/* --- Le formulaire --- */
.form {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
}

.form__grille { display: grid; gap: var(--e-4); }
@media (min-width: 620px) { .form__duo { grid-template-columns: 1fr 1fr; display: grid; gap: var(--e-4); } }

.champ { display: grid; gap: var(--e-2); }

.champ label {
  font-size: var(--t-petit);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}
.champ .facultatif {
  font-weight: 400;
  font-size: var(--t-mini);
  color: var(--texte-2);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.62rem 0.75rem;
  font-size: var(--t-petit);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  color: var(--encre);
  transition: border-color var(--transition), background var(--transition);
}
.champ textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { background: var(--surface); }

.champ select {
  appearance: none;
  /* Chevron dessiné en data-URI : pas de fichier, pas de requête.
     Seule couleur écrite en dur du projet avec celles des SVG. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b7f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 15px;
  padding-right: 2.2rem;
}

/* Champs en monospace : ce sont des données. */
.champ input[type='tel'],
.champ input[type='email'],
.champ input[name='montant'] { font-family: var(--f-mono); }

/* --- Validation en direct --- */
.champ.est-invalide input,
.champ.est-invalide select,
.champ.est-invalide textarea { border-color: var(--erreur); }

.champ__erreur {
  font-size: var(--t-mini);
  color: var(--erreur);
  min-height: 0;
  display: none;
}
.champ.est-invalide .champ__erreur { display: block; }

/* Champ piège anti-robot : invisible, doit rester vide. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__pied { margin-top: var(--e-5); display: grid; gap: var(--e-4); }

.form__mention {
  font-size: var(--t-mini);
  color: var(--texte-2);
  line-height: 1.5;
  max-width: none;
}

.form__etat {
  font-size: var(--t-petit);
  padding: var(--e-4);
  border-radius: var(--r-2);
  background: var(--ardoise-voile);
  border: 1px solid var(--filet);
  display: none;
}
.form__etat.est-visible { display: block; }

/* =========================================================================
   19. PIED DE PAGE
   ========================================================================= */

.pied {
  background: var(--surface);
  border-top: 1px solid var(--filet);
  padding-block: var(--section-y) var(--e-6);
  margin-top: var(--section-y);
}

.pied__haut { display: grid; gap: var(--e-6); margin-bottom: var(--e-7); }
@media (min-width: 860px) {
  .pied__haut { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: var(--e-7); }
}

.pied__logo { margin-bottom: var(--e-4); }
.pied__resume { font-size: var(--t-petit); color: var(--texte-2); max-width: 40ch; }

.pied__titre {
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin-bottom: var(--e-3);
}

.pied__liste { list-style: none; display: grid; gap: 0.45rem; }
.pied__liste a, .pied__liste span {
  font-size: var(--t-petit);
  color: var(--texte-2);
  text-decoration: none;
}
.pied__liste a:hover { color: var(--encre); }

.pied__langues { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; }
.pied__langues button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--texte-2);
  padding: 0.28em 0.55em;
  border: 1px solid var(--filet);
  border-radius: var(--r-1);
  transition: border-color var(--transition), color var(--transition);
}
.pied__langues .drapeau { width: 16px; height: 11px; }
.pied__langues button:hover { color: var(--encre); border-color: var(--ardoise); }
.pied__langues button[aria-current='true'] { color: var(--encre); border-color: var(--ardoise); }

/* --- Mentions légales --- */
.pied__legal {
  padding-top: var(--e-5);
  border-top: 1px solid var(--filet);
  display: grid;
  gap: var(--e-3);
}
.pied__legal p {
  font-size: var(--t-mini);
  color: var(--texte-2);
  line-height: 1.6;
  max-width: none;
}
.pied__legal .donnee { color: var(--encre); font-size: 0.95em; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-4);
  margin-top: var(--e-2);
  border-top: 1px solid var(--filet);
  font-size: var(--t-mini);
  color: var(--texte-2);
}

/* =========================================================================
   20. ANIMATIONS D'APPARITION
   -------------------------------------------------------------------------
   Un fondu et un léger décalage vertical à l'entrée dans l'écran. Rien de
   plus. Seules opacity et translate sont animées — jamais une propriété
   qui déclenche un recalcul de mise en page.
   ========================================================================= */

.apparait {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 520ms ease, translate 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apparait.est-visible { opacity: 1; translate: 0 0; }

/* Léger décalage en cascade pour les éléments d'une même grille. */
.apparait[data-retard='1'] { transition-delay: 70ms; }
.apparait[data-retard='2'] { transition-delay: 140ms; }
.apparait[data-retard='3'] { transition-delay: 210ms; }
.apparait[data-retard='4'] { transition-delay: 280ms; }

/* Mouvement réduit : tout est affiché, rien ne bouge, aucun retard. */
@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; translate: 0 0; transition: none; }
  .apparait[data-retard] { transition-delay: 0ms; }
}

/* Si JavaScript ne s'exécute pas, rien ne doit rester invisible. */
.sans-js .apparait { opacity: 1; translate: 0 0; }
.sans-js .correction__montant--propose::after { transform: scaleX(1); }
.sans-js .correction__montant--obtenu { opacity: 1; translate: 0 0; }
.sans-js .section__titre::after { transform: scaleX(1); }

/* =========================================================================
   21. IMPRESSION — un avocat imprime son dossier.
   ========================================================================= */

@media print {
  .barre, .sommaire, .evitement, .menu, .onglets, .form { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .apparait { opacity: 1 !important; translate: none !important; }
  .section { break-inside: avoid; border-bottom: 1px solid #ccc; }
  .faq__reponse { grid-template-rows: 1fr !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}