@layer pages {
  /* Accueil : héros, tout l'essentiel dans le premier écran mobile */
  .heros { padding-block: var(--e-6) var(--e-8); }
  .heros__grille { display: grid; gap: var(--e-7); align-items: center; }
  @media (width >= 60rem) { .heros__grille { grid-template-columns: 1.35fr 1fr; gap: var(--e-8); } .heros { padding-block: var(--e-8) var(--e-9); } }
  .heros__texte { display: grid; gap: var(--e-5); justify-items: start; }
  .heros h1 { max-inline-size: 18ch; }
  .heros__slogan, .page-tete__accroche { font-family: var(--police-texte); font-style: italic; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); color: var(--titre); }
  .heros__liste { font-size: 1.1875rem; font-weight: var(--g-ui); color: var(--titre); }
  .heros__rassure { font-size: var(--t-petit); color: var(--texte-doux); }
  .heros__figure { display: grid; gap: var(--e-3); }
  .heros__photo { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 35%; border-radius: var(--rayon-carte); background: var(--surface); }
  @media (width >= 60rem) { .heros__photo { aspect-ratio: 4 / 5; } }
  .heros__figure figcaption { font-size: var(--t-petit); color: var(--texte-doux); }

  /* grid-auto-rows: 1fr égalise toutes les rangées, pas seulement les cartes d'une même rangée */
  .metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); grid-auto-rows: 1fr; gap: var(--e-3); }
  @media (width >= 48rem) { .metiers { grid-template-columns: repeat(3, 1fr); } }
  .metiers li { display: flex; }
  .metiers a {
    flex: 1; display: flex; align-items: center; min-block-size: 4.5rem; padding: var(--e-3) var(--e-4); line-height: 1.25;
    background: var(--surface); border: 1.5px solid var(--filet); border-radius: var(--rayon-carte);
    font-weight: var(--g-ui); font-size: 1.125rem; color: var(--titre); text-decoration: none;
    transition: border-color var(--d-micro) var(--courbe-stylo);
  }
  .metiers a:hover { border-color: var(--action); text-decoration: underline; text-decoration-thickness: 2px; }

  .services { display: grid; gap: var(--e-5); }
  @media (width >= 48rem) { .services { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }
  .service { display: grid; gap: var(--e-4); align-content: start; padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
  .service h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
  .service__icone { inline-size: 2.75rem; block-size: 2.75rem; padding: 0.625rem; border-radius: 50%; background: var(--accent-pale); color: var(--accent); }

  .etapes { display: grid; gap: var(--e-6); padding: 0; }
  @media (width >= 56rem) { .etapes { grid-template-columns: repeat(3, 1fr); } }
  /* Mobile : case à gauche, fil vertical. Desktop : case au-dessus, fil horizontal. */
  .etape {
    --pas: 0.7s;
    --delai: calc(var(--i, 0) * var(--pas));
    position: relative; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--e-4); row-gap: var(--e-2); align-content: start;
  }
  .etape:nth-child(2) { --i: 1; }
  .etape:nth-child(3) { --i: 2; }
  .etape > :not(.etape__case) { grid-column: 2; }
  .etape__case {
    grid-row: 1 / span 2; position: relative; display: grid; place-items: center;
    inline-size: 2.5rem; block-size: 2.5rem; border: 2px solid var(--accent); border-radius: 8px;
    color: var(--blanc-lilas); isolation: isolate; overflow: hidden;
  }
  .etape__case::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform-origin: left bottom; }
  .etape__case .icone { inline-size: 1.4rem; block-size: 1.4rem; }
  .etape:not(:last-child)::after {
    content: ""; position: absolute; inset-inline-start: calc(1.25rem - 1px);
    inset-block: calc(2.5rem + var(--e-2)) calc(var(--e-2) - var(--e-6));
    border-inline-start: 2px dashed var(--accent); opacity: 0.45; transform-origin: top;
  }
  @media (width >= 56rem) {
    .etape { grid-template-columns: 1fr; row-gap: var(--e-3); }
    .etape > :not(.etape__case) { grid-column: 1; }
    .etape__case { grid-row: auto; }
    .etape:not(:last-child)::after {
      inset-block: calc(1.25rem - 1px) auto; inset-inline: calc(2.5rem + var(--e-3)) calc(var(--e-3) - var(--e-6));
      border-inline-start: 0; border-block-start: 2px dashed var(--accent); transform-origin: left;
    }
  }

  /* État de départ quand le JS anime : rien n'est coché. Sans JS, tout reste coché. */
  .etapes--anime .etape__case::before { transform: scale(0); }
  .etapes--anime .etape__case .icone { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  .etapes--anime .etape:not(:last-child)::after { transform: scaleY(0); }
  .etapes--anime .etape > :not(.etape__case) { opacity: 0.35; transform: translateY(0.5rem); }
  @media (width >= 56rem) { .etapes--anime .etape:not(:last-child)::after { transform: scaleX(0); } }

  .etapes--vues .etape__case { animation: case-pop 0.45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--delai) + 0.15s) both; }
  .etapes--vues .etape__case::before { transform: scale(1); transition: transform 0.3s ease-out var(--delai); }
  .etapes--vues .etape__case .icone { opacity: 1; transform: none; transition: opacity 0.2s var(--delai), transform 0.45s cubic-bezier(.3, 1.8, .5, 1) calc(var(--delai) + 0.1s); }
  .etapes--vues .etape > :not(.etape__case) { opacity: 1; transform: none; transition: opacity 0.4s var(--delai), transform 0.4s ease-out var(--delai); }
  .etapes--vues .etape:not(:last-child)::after { transform: none; transition: transform 0.5s ease-in-out calc(var(--delai) + 0.3s); }

  @keyframes case-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } }

  .reperes-prix { display: grid; gap: var(--e-4); margin-block-start: var(--e-8); padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); }
  @media (width >= 56rem) { .reperes-prix { grid-template-columns: 1fr 1fr auto; align-items: center; gap: var(--e-6); } }
  .reperes-prix__montant { display: block; font-family: var(--police-titre); font-weight: var(--g-titre); font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--titre); font-variant-numeric: tabular-nums; }

  .etapes__action { margin-block-start: var(--e-6); }
  .services__suite { margin-block: var(--e-6) 0; }
  /* lien-fort est inline-block avec padding : dans une phrase, il écarte les lignes */
  .services__suite .lien-fort { display: inline; padding-block: 0; }

  .avis { display: grid; gap: var(--e-5); }
  @media (width >= 48rem) { .avis { grid-template-columns: 1fr 1fr; } }
  .avis__carte { display: grid; gap: var(--e-4); padding: var(--e-6); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); }
  .avis__carte blockquote { font-family: var(--police-texte); font-style: italic; }
  .avis__carte figcaption { font-size: var(--t-petit); color: var(--texte-doux); }

  .contact { display: grid; gap: var(--e-7); }
  @media (width >= 56rem) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } }
  .contact__texte { display: grid; gap: var(--e-4); }
  .contact__texte h2 { margin: 0; }
  .a-propos__photo { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-carte); }
  @media (width >= 60rem) { .a-propos__photo { aspect-ratio: 16 / 7; object-position: 50% 40%; } }
  .contact__photo { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-carte); background: var(--surface); }
  .contact__autres { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
  .contact__autres a { display: inline-flex; align-items: center; gap: var(--e-3); padding-block: var(--e-2); font-weight: var(--g-ui); font-size: 1.125rem; color: var(--bouton); }
  .contact__autres a:hover { color: var(--bouton-survol); }
  .contact__autres .icone { inline-size: 1.25em; block-size: 1.25em; color: var(--bouton); }
  .reseaux { display: grid; gap: var(--e-3); }
  .reseaux__titre { margin: 0; font-size: var(--t-ui); }
  .reseaux__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }
  .reseau {
    display: inline-flex; align-items: center; gap: var(--e-2);
    min-block-size: var(--cible-min); padding: var(--e-2) var(--e-4);
    border: 2px solid var(--filet); border-radius: var(--rayon-bouton); background: var(--surface);
    color: var(--titre); font-family: var(--police-ui); font-weight: var(--g-ui); text-decoration: none;
    transition: border-color var(--d-micro) var(--courbe-stylo);
  }
  .reseau .icone { inline-size: 1.25em; block-size: 1.25em; color: var(--accent); }
  .reseau:hover { border-color: var(--accent); }

  /* En-tête des pages intérieures */
  .page-tete { padding-block: var(--e-6) var(--e-8); }
  .page-tete__texte { display: grid; gap: var(--e-5); justify-items: start; }
  .page-tete h1 { max-inline-size: 22ch; }
  .page-tete__intro { font-size: 1.25rem; }
  .page-tete__lieu { font-size: var(--t-petit); color: var(--texte-doux); }

  /* Pages métiers */
  .metier-taches { display: grid; gap: var(--e-6); }
  @media (width >= 56rem) { .metier-taches { grid-template-columns: 1fr 1fr; align-items: start; } }
  .metier-taches .carte { display: grid; gap: var(--e-5); }
  .note-tarif { padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--accent-pale); }

  /* Articles */
  .article { padding-block-end: var(--e-8); }
  .banniere { margin-block-end: var(--e-7); }
  .banniere img { inline-size: 100%; aspect-ratio: 1376 / 768; object-fit: cover; border-radius: var(--rayon-carte); background: var(--filet); }
  .page-tete .banniere { margin-block: var(--e-7) 0; }
  .article .page-tete { padding-block-end: var(--e-6); }
  .article__meta { color: var(--texte-doux); font-size: var(--t-petit); }
  .prose { display: grid; gap: var(--e-5); font-family: var(--police-texte); font-size: 1.1875rem; }
  .prose h2 { margin-block-start: var(--e-6); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
  .prose > h2:first-child { margin-block-start: 0; }
  .prose ul { display: grid; gap: var(--e-3); padding-inline-start: var(--e-5); }
  .prose li::marker { color: var(--accent); }
  .encart { display: grid; gap: var(--e-4); justify-items: start; margin-block: var(--e-5); padding: var(--e-6); border-radius: var(--rayon-carte); background: var(--surface); border-inline-start: 4px solid var(--accent); font-family: var(--police-ui); }
  .encart h2 { margin: 0; font-size: 1.5rem; }

  /* Encart vers le simulateur */
  .simu-cta { padding-block: var(--e-7); container-type: inline-size; }
  .simu-cta__carte { display: grid; gap: var(--e-5); justify-items: start; padding: var(--e-6); border-radius: var(--rayon-carte); background: var(--accent-pale); border-inline-start: 4px solid var(--accent); }
  @container (width >= 48rem) { .simu-cta__carte { grid-template-columns: 1fr auto; align-items: center; } }
  .simu-cta h2 { margin: 0 0 var(--e-3); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
  .simu-cta p { margin: 0; max-inline-size: 60ch; }

  /* Blog */
  .filtres { display: grid; gap: var(--e-4); margin-block-end: var(--e-6); }
  .filtres__recherche { max-inline-size: 28rem; }
  .filtres__themes { margin: 0; padding: 0; border: 0; }
  .filtres__puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
  .puce {
    display: inline-flex; align-items: center; min-block-size: var(--cible-min); padding-inline: var(--e-4);
    border: 1.5px solid var(--filet); border-radius: 999px; background: var(--surface);
    font-size: var(--t-ui); font-weight: var(--g-ui); color: var(--titre); cursor: pointer;
  }
  .puce:hover { border-color: var(--action); }
  .puce:has(:checked) { background: var(--accent); border-color: var(--accent); color: var(--blanc-lilas); }
  .puce:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .filtres__total { font-size: var(--t-petit); color: var(--texte-doux); }
  .filtres__vide { padding-block: var(--e-6); color: var(--texte-doux); }
  .liste-articles { display: grid; gap: var(--e-5); }
  @media (width >= 56rem) { .liste-articles { grid-template-columns: 1fr 1fr; } }
  .apercu { position: relative; display: grid; gap: var(--e-3); align-content: start; padding: var(--e-6); overflow: hidden; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); box-shadow: 0 1px 2px rgb(7 3 26 / 0.06), 0 4px 12px rgb(7 3 26 / 0.06); transition: box-shadow var(--d-micro) var(--courbe-stylo); }
  /* Miniature pleine largeur en haut de la carte ; décorative, le titre porte le sens */
  .apercu picture, .apercu__unie { margin: calc(-1 * var(--e-6)) calc(-1 * var(--e-6)) var(--e-2); }
  .apercu__unie { block-size: 6px; background: var(--accent); }
  .apercu img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .apercu:has(a:hover) { box-shadow: 0 2px 4px rgb(7 3 26 / 0.08), 0 12px 32px rgb(7 3 26 / 0.12); }
  .apercu h2 { font-size: 1.5rem; margin: 0; }
  .apercu h2 a { color: var(--titre); text-decoration: none; }
  .apercu h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .apercu h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
  .apercu__meta { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; font-size: var(--t-petit); color: var(--texte-doux); }

  /* Tarifs */
  .selecteur { display: grid; gap: var(--e-6); }
  @media (width >= 64rem) { .selecteur { grid-template-columns: 1fr 1fr; align-items: start; } }
  .bloc-tarifs { min-inline-size: 0; margin: 0; padding: var(--e-5) var(--e-4); border: 1px solid var(--filet); border-radius: var(--rayon-carte); background: var(--surface); box-shadow: var(--ombre-carte); display: grid; gap: 0; }
  @media (width >= 30rem) { .bloc-tarifs { padding: var(--e-6); } }
  .bloc-tarifs legend { float: inline-start; inline-size: 100%; padding: 0; font-family: var(--police-titre); font-weight: var(--g-titre); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--titre); }
  .bloc-tarifs > p { clear: both; }
  .bloc-tarifs > .aide { margin-block: var(--e-1) var(--e-4); }

  .bloc-tarifs { container: bloc-tarifs / inline-size; }
  .ligne-tarif {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-2) var(--e-3); align-items: start;
    padding: var(--e-4);
    border: 1px solid var(--filet); border-radius: var(--rayon-controle);
    background: var(--surface);
    font-family: var(--police-ui); font-size: var(--t-ui); line-height: 1.4; color: var(--texte);
    cursor: pointer;
    transition: background-color var(--d-micro) var(--courbe-stylo), border-color var(--d-micro) var(--courbe-stylo);
  }
  .ligne-tarif + .ligne-tarif { margin-block-start: var(--e-3); }
  .ligne-tarif:hover { border-color: color-mix(in oklch, var(--marron) 40%, var(--filet)); background: color-mix(in oklch, var(--marron) 4%, var(--surface)); }
  .ligne-tarif:has(input:checked) { border-color: var(--action); background: var(--accent-pale); box-shadow: inset 0 0 0 1px var(--action); color: var(--titre); }
  .ligne-tarif:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .ligne-tarif input { inline-size: 1.375rem; block-size: 1.375rem; margin: 0.05em 0 0; accent-color: var(--action); }
  .ligne-tarif input:focus-visible { outline: 0; }
  .ligne-tarif__prix { display: grid; justify-items: end; min-inline-size: 5.5ch; font-weight: var(--g-titre); font-size: 1.0625rem; font-variant-numeric: tabular-nums; color: var(--titre); white-space: nowrap; text-align: end; }
  .ligne-tarif__tag { display: block; inline-size: fit-content; margin-block-start: var(--e-3); padding-block: 0.1em; font-size: 0.8125rem; }
  /* Colonne étroite : le prix passe sous le libellé pour laisser toute la largeur au texte */
  @container bloc-tarifs (width < 30rem) {
    .ligne-tarif { grid-template-columns: auto 1fr; padding: var(--e-3); }
    .ligne-tarif__prix { grid-column: 2; justify-items: start; text-align: start; padding-block-start: var(--e-2); border-block-start: 1px dashed var(--filet); }
  }
  .ligne-tarif:has(input:checked) .ligne-tarif__tag { background: var(--surface); }
  .ligne-tarif[hidden], .bloc-tarifs[hidden] { display: none; }
  .filtres--tarifs { margin-block-end: var(--e-5); }
  #prestations .filtres__vide { margin: 0; }
  .ligne-tarif__prix small { font-size: var(--t-petit); font-weight: var(--g-texte); color: var(--texte-doux); }

  .total {
    inset-block-end: calc(var(--hauteur-barre) + var(--e-3)); z-index: 1;
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--e-4);
    margin-block-start: var(--e-4); padding: var(--e-4);
    border-radius: var(--rayon-controle); background: var(--accent-pale);
    box-shadow: 0 -6px 16px rgb(7 3 26 / 0.06);
    font-family: var(--police-ui); font-weight: var(--g-ui); color: var(--titre);
  }
  .bloc-tarifs:has(input:checked) .total { position: sticky; }
  @media (width >= 48rem) { .total { inset-block-end: var(--e-3); } }
  .total output { grid-row: span 2; align-self: center; font-family: var(--police-titre); font-weight: var(--g-titre); font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
  .selecteur__envoi { display: grid; gap: var(--e-3); justify-items: start; margin-block-start: var(--e-6); }

  .simu { display: grid; gap: var(--e-6); padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); }
  @media (width >= 56rem) { .simu { grid-template-columns: 1fr 1.3fr; } }
  .simu__reglages { display: grid; gap: var(--e-6); align-content: start; }
  .reglette { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3); align-items: center; }
  .reglette input { inline-size: 100%; min-block-size: var(--cible-min); accent-color: var(--action); }
  .reglette output { min-inline-size: 3.5ch; text-align: end; font-family: var(--police-titre); font-weight: var(--g-titre); font-size: 1.5rem; color: var(--titre); }
  .champ-euro { position: relative; }
  .champ-euro input { padding-inline-end: 2.5rem; }
  .champ-euro span { position: absolute; inset-inline-end: var(--e-4); inset-block-start: 50%; translate: 0 -50%; color: var(--texte-doux); }
  .simu__resultat { display: grid; gap: var(--e-2); align-content: start; }
  @media (width >= 56rem) { .simu__resultat { padding-inline-start: var(--e-6); border-inline-start: 1px solid var(--filet); } }
  .simu__annuel { display: block; font-family: var(--police-titre); font-weight: var(--g-titre); font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; letter-spacing: var(--ie-titre); color: var(--titre); font-variant-numeric: tabular-nums; }
  .simu__perte { margin-block: var(--e-3); padding-block-start: var(--e-3); border-block-start: 1px solid var(--filet); }
  .simu__resultat .bouton { justify-self: start; }

  /* Pages légales */
  .legal { display: grid; gap: var(--e-5); }
  .legal h2 { margin-block-start: var(--e-6); font-size: 1.75rem; }
  .legal dl { display: grid; gap: var(--e-2) var(--e-6); }
  @media (width >= 40rem) { .legal dl { grid-template-columns: max-content 1fr; } }
  .legal dt { font-weight: var(--g-ui); color: var(--titre); }

  .erreur-404 { display: grid; gap: var(--e-5); justify-items: start; padding-block: var(--e-8); }
  @media (width >= 60rem) { .erreur-404 { padding-block: var(--e-9); } }
}

@layer pages {
  /* Prise de rendez-vous */
  .agenda { display: grid; place-items: center; min-block-size: 22rem; padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
  .agenda__accord { display: grid; gap: var(--e-4); justify-items: center; max-inline-size: 46ch; text-align: center; }
  .agenda--charge { display: block; padding: 0; overflow: hidden; }
  .agenda__cadre { display: block; inline-size: 100%; block-size: 66rem; border: 0; }
  @media (width >= 56rem) { .agenda__cadre { block-size: 44rem; } }
}