/* ───────────────────────────────────────────────────────────────────────────
   L'ACCUEIL — gabarit page-accueil (motifs accueil-hero, accueil-colonnes,
   accueil-avis ; textes et réglages : inc/accueil.php). Le bas de page,
   accueil-suivre, a son propre fichier : la page Coachs le reprend.

   Toute la page est en Manrope : la police de titrage du thème y pointe sur
   la police de texte (titres, boutons, pied de page, panneau du menu). Les
   graisses sont réglées élément par élément, Marcellus n'en ayant qu'une.
   Jamais #000 ni #fff ; le blanc des sections claires est un blanc chaud,
   #FCFAF7, hors charte (le plus clair y est #F5F0EB).
   ─────────────────────────────────────────────────────────────────────────── */
body.page-template-page-accueil {
  --font-display: var(--font-body);
  --wp--preset--font-family--display: var(--wp--preset--font-family--body);
}
.page-template-page-accueil .cp-nav__panneau .cp-nav__lien,
.page-template-page-accueil .cp-nav__panneau .cp-nav__item-titre { font-weight: 600; letter-spacing: -0.01em; }

/* « Trouve ton cours » et « Par où commencer » descendent aux trois colonnes. */
@media (prefers-reduced-motion: no-preference) { html:has(#decouvrir) { scroll-behavior: smooth; } }

/* ═══ 1. LE HAUT ═══════════════════════════════════════════════════════════
   La vidéo du haut de Tarifs, sans filtre, sous un voile brun-noir chaud
   rgb(26 4 6), plus dense au centre et sur les bords : c'est la lumière du
   studio qu'on doit voir, jamais une teinte bordeaux.
   Échelle (rem, elle suit le réglage de taille du lecteur) : surtitre
   0,8125 ; bouton 0,875 ; phrase 1,3125 ; titre 2,5 → 4,25, fluide (66 px à
   1 440 : 3,2 fois la phrase, 72 % de l'écran). Rythme : serré du surtitre
   au titre, plus large du titre à la phrase, borné de la phrase aux boutons. */
.acc-hero {
  --acc-surtitre: 0.8125rem;
  --acc-bouton: 0.875rem;
  --acc-phrase: 1.3125rem;
  --acc-titre: clamp(2.5rem, 4.6vw, 4.25rem);
  --acc-ecart-titre: 2rem;
  --acc-ecart-phrase: 1.75rem;
  --acc-ecart-boutons: clamp(3rem, 8svh, 5.5rem);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--cp-nav-h, 0px));   /* plein écran SOUS la barre collante */
  overflow: hidden;
  background: var(--vin-950);
  color: var(--davos);
}
.acc-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.acc-hero__voile {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 45%, rgb(26 4 6 / .65) 0%, rgb(26 4 6 / .55) 60%, rgb(26 4 6 / .75) 100%);
}

/* Le groupe (texte, puis boutons) est centré dans la hauteur libre. */
.acc-hero__contenu { flex: 1; display: grid; grid-template-rows: 1fr auto auto 1fr; justify-items: center; width: 100%; padding: 0 24px; text-align: center; }
.acc-hero__bloc { position: relative; grid-row: 2; justify-self: stretch; display: flex; flex-direction: column; align-items: center; }
.acc-hero__h1 { margin: 0; display: flex; flex-direction: column; align-items: center; font: inherit; }
.acc-hero__surtitre { margin: 0; font: 600 var(--acc-surtitre)/1.3 var(--font-body), sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--davos); text-wrap: balance; }
.acc-hero__titre { margin: var(--acc-ecart-titre) 0 0; font: 600 var(--acc-titre)/1.08 var(--font-body), sans-serif; letter-spacing: -0.025em; color: var(--davos); text-wrap: balance; }
.acc-hero__texte { max-width: 44rem; margin: var(--acc-ecart-phrase) 0 0; font: 400 var(--acc-phrase)/1.55 var(--font-body), sans-serif; color: var(--davos); text-wrap: balance; }

/* « Tu viens ? » : la manuscrite de la marque (Homemade Apple, la main de
   Tarifs et du pop-up), penchée, posée au-dessus du début du titre comme une
   note écrite à la main. Elle s'écrit une fois au chargement. */
@font-face { font-family: "Homemade Apple"; src: url("../fonts/homemade-apple-latin.woff2") format("woff2"); font-display: swap; }
.acc-hero__manuscrit {
  position: absolute; top: -0.25rem; left: max(0px, calc(50% - min(36vw, 33rem)));
  margin: 0; padding: 0.15em 0.3em;   /* les boucles débordent de la boîte */
  font-family: "Homemade Apple", cursive; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.6;
  color: var(--davos); transform: rotate(-8deg); transform-origin: left center; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .acc-hero__manuscrit { animation: acc-ecrit 1.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.4s both; }
}
@keyframes acc-ecrit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Les deux actions : la pilule crème (sa question en petit au-dessus), puis
   « Voir le planning », précédé d'un rond fléché. */
.acc-hero__boutons { grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 2.5rem; margin-top: var(--acc-ecart-boutons); }
.acc-hero__guide {
  display: inline-flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; padding: 0.625rem 2.25rem; border-radius: 999px;
  background: var(--ivory); color: var(--vin-700); box-shadow: 0 12px 30px rgb(26 4 6 / 0.45); text-decoration: none; text-align: left;
  transition: background-color var(--dur-base) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo);
}
.acc-hero__guide-texte { display: flex; flex-direction: column; gap: 0.3rem; }
.acc-hero__guide small { font: 600 0.6875rem/1 var(--font-body), sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--vin-600); }
.acc-hero__guide-texte > span { font: 700 var(--acc-bouton)/1 var(--font-body), sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.acc-hero__guide:hover { background: var(--cream); transform: translateY(-2px); }
.acc-hero__guide:active { transform: scale(0.98); }
.acc-hero__planning { display: inline-flex; align-items: center; gap: 1rem; color: var(--davos); text-decoration: none; }
.acc-hero__planning > span:last-child { font: 600 22px/1 var(--font-body), sans-serif; letter-spacing: -0.01em; }
.acc-hero__rond {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--davos);
  transition: background-color var(--dur-base) var(--ease-out-expo);
}
.acc-hero__planning:hover .acc-hero__rond { background: rgb(242 242 242 / 0.14); }
.acc-hero__fleche { flex: none; width: 1.25rem; height: 1.25rem; transition: transform var(--dur-base) var(--ease-out-expo); }
.acc-hero__rond .acc-hero__fleche { width: 1.125rem; height: 1.125rem; }
.acc-hero__guide:hover .acc-hero__fleche, .acc-hero__planning:hover .acc-hero__fleche { transform: translateX(3px); }
.acc-hero__guide:focus-visible, .acc-hero__planning:focus-visible { outline: 2px solid var(--davos); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .acc-hero__guide, .acc-hero__fleche, .acc-hero__rond { transition: none; }
  .acc-hero__guide:hover, .acc-hero__guide:active, .acc-hero__fleche { transform: none !important; }
}

/* Téléphone : le haut de page remplit exactement le premier écran sous la
   barre (100svh : la hauteur avec les barres du navigateur affichées), et
   le bloc texte + boutons y est CENTRÉ dans la hauteur, comme en PC. Les
   mêmes textes qu'en PC (6 octobre 2026, demande de Corentin : le surtitre
   fait partie du H1), la note manuscrite dans le flux. Tailles et écarts
   suivent la hauteur de l'écran (svh) pour que tout tienne, boutons
   compris, jusqu'à l'iPhone SE de 320 × 568. (Jusqu'au 7 octobre 2026, le
   bloc partait du haut et la section débordait de l'écran sur les petits
   téléphones : reproché par Corentin.) */
@media (max-width: 767px) {
  .acc-hero {
    --acc-phrase: clamp(0.9375rem, 2.3svh, 1.0625rem);
    --acc-titre: clamp(1.625rem, min(9vw, 5.2svh), 2.25rem);   /* 35 px à 390 × 844 : 3 lignes de 320 à 414 px */
    --acc-ecart-titre: clamp(0.625rem, 2svh, 1.25rem);
    --acc-ecart-phrase: clamp(0.75rem, 2.4svh, 1.5rem);
    --acc-ecart-boutons: clamp(1.25rem, 4svh, 2.75rem);
    min-height: calc(100svh - var(--cp-nav-h, 0px));
  }
  .acc-hero__voile { background: linear-gradient(to bottom, rgb(26 4 6 / 0.6) 0%, rgb(26 4 6 / 0.8) 30%, rgb(26 4 6 / 0.76) 70%, rgb(26 4 6 / 0.5) 100%); }   /* plus dense au centre, derrière le texte */
  .acc-hero__contenu { padding: 1.25rem 24px; }   /* la grille de PC (1fr auto auto 1fr) centre le bloc dans la hauteur */
  .acc-hero__surtitre { font-size: 0.75rem; letter-spacing: 0.12em; }   /* une ligne dès 360 px : sinon le « • » ouvre la seconde */
  .acc-hero__manuscrit { position: static; align-self: flex-start; margin: 0 0 clamp(0.25rem, 1.4svh, 0.875rem) 0.25rem; font-size: clamp(1.125rem, 2.8svh, 1.375rem); }
  .acc-hero__titre { line-height: 1.1; }
  .acc-hero__titre br { display: none; }   /* le titre s'équilibre seul (text-wrap) au lieu de couper au retour forcé */
  .acc-hero__boutons { flex-direction: column; gap: clamp(0.875rem, 3svh, 1.75rem); }
  .acc-hero__guide { min-height: clamp(3.5rem, 8svh, 4.25rem); }
}
/* Petits téléphones : le gros bouton gardait mal ses deux lignes. */
@media (max-width: 374px) {
  .acc-hero__guide { gap: 0.75rem; padding-inline: 1.375rem; }
  .acc-hero__guide small { letter-spacing: 0.06em; }
  .acc-hero__guide-texte > span { letter-spacing: 0.08em; }
}

/* ═══ 2. LES TROIS COLONNES ═════════════════════════════════════════════════
   Trois colonnes égales sur fond blanc chaud ; titres en capitales grasses,
   texte et boutons centrés, boutons alignés en bas. Derrière, la photo du
   champ « Colonnes : photo de fond » (la salle et sa banquette, la même que
   derrière « Ton studio » des pages Reformer et Mat), sous le même voile
   clair, en plus doux : la photo un peu éteinte, et un voile qui se fond dans
   le blanc chaud en haut et en bas, sans bord franc avec les sections
   voisines. Le texte est à l'encre, comme les titres : un brun-gris se
   perdait dans les rayures de la photo (5,5:1), l'encre se lit sur n'importe
   quel fond (12:1).
   En téléphone, une colonne. */
.acc-cols {
  --acc-blanc: #FCFAF7;
  position: relative;
  isolation: isolate;
  background: var(--acc-blanc);
}
/* La photo et son voile en deux calques : le filtre n'éteint que la photo. */
.acc-cols.a-photo::before,
.acc-cols.a-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.acc-cols.a-photo::before { background: var(--acc-cols-photo) 50% 62% / cover no-repeat; filter: saturate(0.75); }
.acc-cols.a-photo::after {
  background: linear-gradient(
    rgb(252 250 247 / 1) 0%,
    rgb(252 250 247 / 0.9) 16%,
    rgb(252 250 247 / 0.86) 50%,
    rgb(252 250 247 / 0.9) 84%,
    rgb(252 250 247 / 1) 100%
  );
}
.acc-cols__piste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding: clamp(3.5rem, 7vw, 6.5rem) max(1.25rem, calc((100% - 1180px) / 2));
}
.acc-col { display: flex; flex-direction: column; min-width: 0; }
.acc-col__img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 328; object-fit: cover; }
.acc-col__img--entiere { object-fit: contain; }   /* même cadre que les autres, l'image entière dedans (« photo entière ») */
.acc-col__panneau { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1.75rem 0 0; text-align: center; }
.acc-col__titre { align-self: stretch; margin: 0; font: 700 22px/1.25 var(--font-body), sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--encre); text-wrap: balance; }
.acc-col__texte { margin: 18px 0 26px; font: 400 18px/1.55 var(--font-body), sans-serif; color: var(--wp--preset--color--encre); text-wrap: pretty; }
.acc-col__bouton { display: inline-flex; align-items: center; gap: 1rem; margin-top: auto; color: var(--wp--preset--color--encre); text-decoration: none; }
.acc-col__bouton > span:last-child { font: 600 20px/1 var(--font-body), sans-serif; letter-spacing: -0.01em; }
.acc-col__rond {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color var(--dur-base) var(--ease-out-expo);
}
.acc-col__bouton:hover .acc-col__rond { background: color-mix(in oklch, currentColor 8%, transparent); }
.acc-col__fleche { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-base) var(--ease-out-expo); }
.acc-col__bouton:hover .acc-col__fleche { transform: translateX(3px); }
.acc-col__bouton:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .acc-col__rond, .acc-col__fleche { transition: none; } .acc-col__fleche { transform: none !important; } }
@media (max-width: 1199px) { .acc-col__bouton > span:last-child { font-size: 18px; } }
@media (max-width: 767px) {
  /* La photo derrière la première colonne seulement, fondue vers le bas : sur
     toute la hauteur des trois colonnes, elle serait agrandie jusqu'au flou. */
  .acc-cols.a-photo::before,
  .acc-cols.a-photo::after { bottom: auto; height: 44rem; }
  .acc-cols.a-photo::before {
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
    mask-image: linear-gradient(#000 60%, transparent);
  }
  .acc-cols.a-photo::after { background: linear-gradient(rgb(252 250 247 / 1), rgb(252 250 247 / 0.88) 14%, rgb(252 250 247 / 0.86) 60%, rgb(252 250 247 / 1)); }
  .acc-cols__piste { display: flex; flex-direction: column; gap: 3rem; padding: 4.5rem 1.25rem 3.5rem; }
  .acc-col__img { aspect-ratio: 4 / 3; }
  .acc-col__panneau { padding-top: 1.5rem; }
  .acc-col__titre { font-size: 20px; }
  .acc-col__texte { font-size: 16px; }
}

/* ═══ 2 bis. SUR TAPIS OU SUR REFORMER ? ═════════════════════════════════════
   D'après la maquette de Corentin (12 octobre 2026), mesurée sur l'image à
   1672 px, puis resserrée à sa demande (877 → 744 px de haut à 1440 de
   large : cartes de 1180 px au plus, photo en 2:1, titres et marges plus
   courts) : deux cartes crème (photo en bandeau, grand titre en
   Marcellus, ligne en capitales, un trait, un bouton pilule
   bordeaux), le « ou » manuscrit dans une pastille bordeaux entre deux
   traits, les mots écrits à la main en haut à droite (PC seulement).
   Marcellus n'a qu'une graisse : jamais de font-weight dessus.
   Le lien est le titre ; son ::after l'étend à toute la carte.
   Au téléphone : une colonne, tout centré, le « ou » entre deux traits
   horizontaux. */
.atr {
  --atr-fond: #F6ECE2;
  --atr-carte: #F9F2EA;
  --atr-texte: #4A3437;
  --atr-trait: var(--wp--preset--color--vin-400);   /* pas de raccourci --vin-400 dans global.css */
  --atr-ou: clamp(4.5rem, 5.4vw, 5.625rem);
  position: relative;
  padding: clamp(2.25rem, 2.8vw, 3rem) max(1.25rem, 6vw) clamp(2.5rem, 3vw, 3.25rem);
  --atr-voisin: #FCFAF7;   /* le blanc chaud du bas des colonnes et du fond des avis */
  --atr-fondu: clamp(3.5rem, 6vw, 6rem);
  /* Un voile en haut et en bas : le crème de la section se fond dans ses
     voisines au lieu d'une coupe droite (demande de Corentin). Des
     dégradés, pas un flou : rien à recalculer au défilement. */
  background:
    linear-gradient(var(--atr-voisin), transparent var(--atr-fondu)),
    linear-gradient(transparent calc(100% - var(--atr-fondu)), var(--atr-voisin)),
    radial-gradient(120% 90% at 50% 40%, var(--atr-fond) 55%, #EFE3D7 100%);
  color: var(--atr-texte);
}
.atr__entete { text-align: center; }
.atr__titre { margin: 0; font-family: "Marcellus", Georgia, serif; font-size: clamp(2.25rem, 3.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.005em; color: var(--vin-800); text-wrap: balance; }
.atr__texte { max-width: 44rem; margin: clamp(0.5rem, 0.8vw, 0.875rem) auto 0; font: 400 clamp(1rem, 1.05vw, 1.0625rem)/1.5 var(--font-body), sans-serif; text-wrap: pretty; }

.atr__manuscrit {
  position: absolute; top: clamp(1rem, 1.6vw, 1.75rem); right: clamp(2rem, 6.5vw, 8rem); margin: 0;
  font-family: "Homemade Apple", cursive; font-size: clamp(1rem, 1.3vw, 1.375rem); line-height: 1.55;
  color: var(--atr-trait); transform: rotate(-17deg); transform-origin: top right; pointer-events: none;
}
.atr__coeur { display: block; width: 1.4em; height: 1.5em; margin: 0.1em 0 0 auto; translate: -0.6em 0; }

.atr__cartes {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--atr-ou) minmax(0, 1fr); column-gap: clamp(1rem, 1.8vw, 1.9rem);
  max-width: 1180px; margin: clamp(1.25rem, 1.6vw, 1.75rem) auto 0; padding: 0; list-style: none;
}
.atr-carte {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 18px; background: var(--atr-carte);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55), 0 1px 2px oklch(34% 0.09 15.6 / 0.06), 0 18px 44px oklch(34% 0.09 15.6 / 0.11);
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}
.atr-carte__photo { aspect-ratio: 2 / 1; overflow: hidden; background: var(--linen-deep); }
.atr-carte__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform var(--dur-slow) var(--ease-out-expo); }
.atr-carte__corps { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1rem, 1.2vw, 1.25rem) clamp(1.5rem, 3.3vw, 3.5rem) clamp(1.25rem, 1.5vw, 1.5rem); }
.atr-carte__titre { margin: 0; font: inherit; }
.atr-carte__lien { display: block; color: inherit; text-decoration: none; font-family: "Marcellus", Georgia, serif; font-size: clamp(2.125rem, 2.6vw, 2.875rem); line-height: 1.05; color: var(--vin-800); }
.atr-carte__sous-titre { display: block; margin-top: 0.5rem; font: 500 clamp(0.6875rem, 0.75vw, 0.75rem)/1.4 var(--font-body), sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vin-500); }
.atr-carte__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.atr-carte__lien:focus-visible { outline: none; }
.atr-carte:has(.atr-carte__lien:focus-visible) { outline: 2px solid var(--vin-700); outline-offset: 4px; }
.atr-carte__titre::after { content: ""; display: block; width: 2.25rem; height: 1px; margin: 1rem 0 1.375rem; background: var(--atr-trait); }   /* le trait entre la ligne en capitales et le bouton */
.atr-carte__bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3rem; margin-top: auto; padding: 0 2.25rem;
  border-radius: var(--radius-pill); background: var(--vin-700); color: var(--ivory);
  font: 600 clamp(0.75rem, 0.8vw, 0.8125rem)/1 var(--font-body), sans-serif; letter-spacing: 0.26em; text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-out-expo);
}
.atr-carte__fleche { display: inline-block; letter-spacing: 0; transition: transform var(--dur-base) var(--ease-out-expo); }
.atr-carte:first-child .atr-carte__photo img { object-position: 50% 80%; }   /* le sol : les Paulettes allongées sont en bas de la photo */
.atr-carte:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55), 0 1px 2px oklch(34% 0.09 15.6 / 0.06), 0 24px 52px oklch(34% 0.09 15.6 / 0.16); }
.atr-carte:hover .atr-carte__photo img { transform: scale(1.03); }
.atr-carte:hover .atr-carte__bouton { background: var(--vin-800); }
.atr-carte:hover .atr-carte__fleche { transform: translateX(3px); }

/* Le « ou » : une pastille bordeaux entre deux traits fins, à la hauteur
   du bas des photos. */
.atr__ou { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.375rem; padding-bottom: clamp(5rem, 7vw, 7.5rem); }   /* centre remonté : à la hauteur du bas des photos, comme sur la maquette */
.atr__ou::before, .atr__ou::after { content: ""; width: 1px; height: clamp(4rem, 6vw, 6.5rem); background: var(--atr-trait); }
.atr__ou-rond {
  display: grid; place-items: center; width: var(--atr-ou); aspect-ratio: 1; border-radius: 50%; flex: none;
  background: var(--vin-700); color: var(--ivory);
  font-family: "Homemade Apple", cursive; font-size: calc(var(--atr-ou) * 0.32); line-height: 1; padding-top: 0.3em;   /* la manuscrite pend sous sa ligne de base */
}

@media (prefers-reduced-motion: reduce) {
  .atr-carte, .atr-carte__photo img, .atr-carte__fleche { transition: none; }
  .atr-carte:hover, .atr-carte:hover .atr-carte__photo img, .atr-carte:hover .atr-carte__fleche { transform: none; }
}
/* Les bords de la maquette, découpés dans l'image de Corentin : le drapé et
   le tapis roulé à gauche, le drapé et les fleurs séchées à droite. Derrière
   les cartes, en PC seulement (le téléphone ne les télécharge pas). */
@media (min-width: 1024px) {
  .atr { isolation: isolate; }
  .atr::before, .atr::after {
    content: ""; position: absolute; top: 0; z-index: -1; height: 100%; background: 0 0 / 100% 100% no-repeat; pointer-events: none;
    mask-image: linear-gradient(transparent, #000 var(--atr-fondu), #000 calc(100% - var(--atr-fondu)), transparent);   /* les décors suivent le voile */
  }
  .atr::before { left: 0; aspect-ratio: 330 / 941; background-image: url("../images/tapis-reformer-bord-gauche.webp"); }
  .atr::after { right: 0; aspect-ratio: 87 / 941; background-image: url("../images/tapis-reformer-bord-droit.webp"); }
}
@media (max-width: 1023px) { .atr__manuscrit { display: none; } }
/* Les retours à la ligne de la maquette ne tiennent qu'en grand écran ;
   en dessous, le texte se coupe seul. */
@media (max-width: 1199px) {
  .atr__texte br { display: none; }
  .atr-carte__sous-titre { letter-spacing: 0.2em; }
}
@media (max-width: 899px) {
  .atr { padding: 3.25rem 1.25rem 3.5rem; }
  .atr__cartes { grid-template-columns: minmax(0, 32rem); justify-content: center; row-gap: 1.25rem; margin-top: 1.75rem; }
  .atr-carte__corps { align-items: center; text-align: center; padding: 1.375rem 1.5rem 1.625rem; }
  .atr-carte__titre::after { margin-inline: auto; }
  .atr__ou { flex-direction: row; gap: 1rem; padding-bottom: 0; }
  .atr__ou::before, .atr__ou::after { width: 4.5rem; height: 1px; }
  .atr__ou-rond { --atr-ou: 3.5rem; }
}