/* Accueil (maquettes « Accueil recommandé », téléphone puis ordinateur à partir de 60rem de large).
   - body[data-appareil] : seuls les textes et dessins de l'appareil s'affichent (.seul-telephone, .seul-ordinateur).
   - body[data-ecran] autre que « accueil » : une photo est choisie, la présentation (.accueil-seul) s'efface ; restent le logo
     et le bouton au-dessus du résultat.
   Tailles de texte en rem, jamais sous 0,9375rem (15 px). */

[data-appareil="ordinateur"] .seul-telephone,
[data-appareil="telephone"] .seul-ordinateur,
body:not([data-ecran="accueil"]) .accueil-seul { display: none !important; }

/* En-tête : logo (retour à l'accueil) et, sur ordinateur, liens vers les étapes et la FAQ. */
.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: 80rem; margin: 0 auto; padding: 1.125rem var(--space-5);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 3rem;
  color: var(--ink); text-decoration: none; font-family: var(--font-title); font-weight: 400; font-size: var(--text-logo); line-height: 1.2;
}
.nav { display: flex; flex-wrap: wrap; gap: var(--space-6); font-weight: 700; font-size: var(--text-body); }
.nav a { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: none; }
.nav a:hover, .logo:hover { text-decoration: underline; }
.logo:focus-visible, .nav a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Haut de page : accroche, paragraphe, bouton (visible sans défiler sur téléphone), photo d'exemple. */
.hero {
  max-width: 80rem; margin: 0 auto; padding: var(--space-2) var(--space-5) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.hero-texte { display: flex; flex-direction: column; gap: 1.125rem; align-items: stretch; }
.accroche { margin: 0; font-size: var(--text-display); line-height: 1.1; text-wrap: balance; }
.soulignement { display: block; max-width: 100%; height: auto; margin-top: -0.75rem; }
.hero-paragraphe { margin: 0; font-size: 1.1875rem; line-height: 1.5; max-width: 33rem; }
.hero-action { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-action .secondary { margin: 0; }
.confidentialite { margin: 0; font-size: var(--text-body-sm); line-height: 1.4; max-width: 29rem; }
.hero-photo { display: flex; justify-content: center; padding-top: var(--space-3); }
.carte-exemple { margin: 0; width: 100%; transform: rotate(1.5deg); }
.carte-exemple .pn-tape { opacity: 0.9; }

/* Une photo est choisie : le haut de page se réduit au bouton, dans la colonne de l'application. */
body:not([data-ecran="accueil"]) .hero { max-width: 36rem; padding-bottom: var(--space-4); }

/* Bande de réassurance (crème). */
.bande-reassurance { background: var(--cream); border-block: var(--border-strong) solid var(--ink); }
.bande-reassurance ul {
  list-style: none; margin: 0 auto; max-width: 80rem; padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); font-weight: 700; font-size: var(--text-body);
}
.bande-reassurance li { display: flex; align-items: center; gap: 0.625rem; }
.bande-reassurance svg { flex: none; }

/* Sections de présentation. */
.section { max-width: 80rem; margin: 0 auto; padding: 2.5rem var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: 1.125rem; }
.section h2 { margin: 0; font-size: 2rem; line-height: 1.15; }
.phrase-carnet { margin: 0.625rem 0 0; text-align: center; font-family: var(--font-title); font-weight: 400; font-size: 1.375rem; line-height: 1.3; }
.phrase-carnet-grande { text-align: left; font-size: 1.5rem; }

/* Avant / après. */
.avant-apres-cartes { display: flex; flex-direction: column; gap: var(--space-3); }
.carte-etiquetee { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.carte-avant { transform: rotate(-1.5deg); }
.carte-apres { transform: rotate(1.5deg); }
.carte-etiquetee .pn-frame { width: 100%; box-sizing: border-box; box-shadow: 4px 5px 0 var(--sky); }
.carte-apres .pn-frame { box-shadow: 4px 5px 0 var(--pink); }
.etiquette {
  padding: 0 var(--space-4); background: var(--paper); border: var(--border-regular) solid var(--ink);
  border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px; font-family: var(--font-title); font-size: 1.25rem;
}
.etiquette-apres { background: var(--peach); }
.fleche { align-self: center; flex: none; }
.fleche-droite { display: none; }
.promeneurs { display: block; width: 100%; max-width: 32.5rem; margin: 0 auto; }

/* Étapes. */
.etapes { gap: 1.375rem; padding-top: 2rem; padding-bottom: 1.5rem; }
.etapes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.375rem; }
.etape { display: flex; gap: 0.875rem; align-items: flex-start; }
.pastille { flex: none; }
.etape-contenu { display: flex; flex-direction: column; gap: 0.125rem; }
.etape h3 { margin: 0; font-size: 1.625rem; line-height: 1.15; }
.etape p { margin: 0; font-size: var(--text-body); line-height: 1.5; }
.etape-dessin { display: block; width: 100%; max-width: 18.75rem; margin-top: 0.625rem; }
.etape-dessin-photo { max-width: 11.875rem; }

/* Questions fréquentes (bande bleue, blocs repliables). */
.bande-faq { background: var(--sky); border-block: var(--border-strong) solid var(--ink); }
.bande-faq .section { padding-top: 2.25rem; padding-bottom: 2.75rem; gap: 1.375rem; }
.faq-liste { display: flex; flex-direction: column; gap: var(--space-3); }
.faq { background: var(--paper); border: var(--border-regular) solid var(--ink); border-radius: var(--radius-field); box-shadow: 3px 4px 0 var(--ground); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 3rem;
  padding: var(--space-4) 1.125rem; list-style: none; cursor: pointer; font-weight: 700; font-size: var(--text-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.faq .chev { flex: none; }
.faq[open] .chev { transform: rotate(180deg); }
.faq .faq-aide { padding: 0 1.125rem 1.125rem; font-size: var(--text-input); line-height: 1.55; display: flex; flex-direction: column; gap: var(--space-3); }
.faq .faq-aide h3 { margin: 0; font-size: 1rem; }
.faq .faq-aide ol { margin: 0; padding-left: 1.375rem; display: flex; flex-direction: column; gap: var(--space-1); }
.faq .faq-aide p { padding: 0; }
.faq .faq-aide .aide-lien a { font-size: var(--text-body-sm); text-underline-offset: 4px; }
.faq p { margin: 0; padding: 0 1.125rem 1.125rem; font-size: var(--text-input); line-height: 1.55; }

/* Pied de page. */
.pied { background: var(--mint); padding: var(--space-5); }
.pied p { max-width: 80rem; margin: 0 auto; font-weight: 700; font-size: 1rem; }

/* Ordinateur : deux colonnes en haut, réassurance en ligne, avant / après côte à côte, étapes en trois colonnes. */
@media (min-width: 60rem) {
  .entete { padding: var(--space-5) var(--space-7); }
  .logo { font-size: 2.25rem; }
  .hero { flex-direction: row; align-items: center; gap: 3.5rem; padding: var(--space-5) var(--space-7) 4rem; }
  .hero-texte { flex: 1 1 31rem; align-items: flex-start; gap: 1.375rem; }
  .accroche { font-size: 4rem; line-height: 1.05; }
  .hero-paragraphe { font-size: 1.3125rem; }
  .hero-action { align-items: flex-start; }
  .hero-action .button { width: auto; min-height: 4rem; padding: 0 2.125rem; }
  .hero-photo { flex: 1 1 26rem; padding: var(--space-5); }
  .carte-exemple { width: 25rem; max-width: 100%; transform: rotate(2.5deg); }
  body:not([data-ecran="accueil"]) .hero { padding-inline: var(--space-5); }

  .bande-reassurance ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-6); padding: 1.375rem var(--space-7); text-align: center; }
  .bande-reassurance li { justify-content: center; }

  .section { padding: 5rem var(--space-7) 3.5rem; gap: 2.5rem; align-items: center; }
  .section h2 { font-size: 2.75rem; text-align: center; }
  .avant-apres-cartes { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6); }
  .carte-etiquetee { width: 21.25rem; max-width: 100%; }
  .carte-avant { transform: rotate(-2deg); }
  .carte-apres { transform: rotate(2deg); }
  .fleche-bas { display: none; }
  .fleche-droite { display: block; }

  .etapes { padding: 2.5rem var(--space-7) 4.5rem; align-items: stretch; }
  .etapes-liste { flex-direction: row; gap: 2.25rem; }
  .etape { flex: 1 1 17.5rem; flex-direction: column; gap: var(--space-2); }
  .etape h3 { font-size: 1.875rem; }
  .etape p { font-size: 1.1875rem; }
  .etape-dessin { max-width: 21.25rem; }
  .etape-dessin-photo { max-width: 13.4375rem; }
  .phrase-carnet-grande { text-align: center; font-size: 1.75rem; }

  .bande-faq .section { padding: 4.5rem var(--space-7) 5rem; max-width: 52rem; align-items: stretch; }
  .pied { padding: var(--space-5) var(--space-7); }
}

/* Aucun mouvement nécessaire : pas d'effet au survol ni à l'ouverture. */
@media (prefers-reduced-motion: reduce) {
  .faq .chev { transition: none; }
}