/* =========================================================================
   MAISON AO — Notre univers : seize languettes, poème-manifeste.
   Reprise du prototype V0 (C:\SITE INTERNET AO\styles.css), avec l'identité
   de l'invitation (commun.css) : le rouge devient --color-accent partout.
   ========================================================================= */

:root {
  --color-ink-dense: #15110e;
  --color-line: rgba(22, 19, 15, .08);
  /* Teinte du papier en composantes, pour les voiles de lisibilité. */
  --papier-rgb: 236, 233, 228;

  /* Durées d'animation — §7 (550 à 800 ms) */
  --duree-ouverture: 650ms;
  --duree-reveal: 420ms;
  --ease-ouverture: cubic-bezier(.22, .61, .36, 1);
  --duree-apercu: 500ms;
  /* Métamorphose vers l'état final (lues par app.js). */
  --duree-meta-1: 520ms;
  --duree-meta-2: 1500ms;
  --ease-metamorphose: cubic-bezier(.22, 1, .36, 1);

  /* Dimensions des lignes/languettes (inchangées) */
  --hauteur-ligne: clamp(27px, 5.4dvh, 50px);
  --taille-lettre: clamp(22px, 3.6dvh, 38px);
  --taille-vers: clamp(14px, 2dvh, 19px);
  --marge-x: clamp(10px, 4vw, 32px);

  /* ——— Géométrie des languettes ouvertes ———
     Le vers le plus long des dix poèmes mesure 12,23 em en Belleza : la colonne du poème
     en garde 12,4 em, centrée dans la rangée. Une languette ouverte peut s'avancer jusqu'à
     --ecart-vers de cette colonne, jamais plus : aucun chevauchement avec le vers, quel que soit le poème.
     Le mot, imprimé sur son bord intérieur, prend la taille que permet cette largeur :
     le plus long (« Apercevoir », 4,26 em) tient toujours sur une ligne. */
  --vers-max: calc(var(--taille-vers) * 12.4);
  --ecart-vers: clamp(8px, 1.8vw, 28px);
  --reveal-ideal: clamp(150px, 22vw, 300px);
  --padding-mot: 14px;
  --taille-mot-ideale: clamp(17px, 2.6dvh, 25px);

  /* Incitation discrète au premier affichage — §3 */
  --invite-dx: 6px;
}

/* =========================================================================
   Base
   ========================================================================= */

.page-univers { position: relative; }

.page-univers button:disabled { cursor: default; }

/* =========================================================================
   En-tête discret : Maison AO (réinitialise) à gauche, Accueil et Replier à droite
   ========================================================================= */

.entete {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding:
    max(clamp(10px, 2dvh, 22px), env(safe-area-inset-top))
    max(clamp(16px, 4vw, 40px), env(safe-area-inset-right))
    0
    max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
}

.entete-gauche {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .7dvh, 7px);
}

.entete-droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.8dvh, 16px);
  padding-top: .35em;
}

.signature {
  position: relative;
  align-self: flex-start;
  margin: 0;
  text-align: left;
  font-family: var(--font-identite);
  font-size: clamp(17px, 2.6dvh, 25px);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--encre);
  -webkit-text-stroke: .006em currentColor;
  transition: opacity .2s ease;
}

.signature:hover { opacity: .8; }

/* Mention éditoriale — §1 : compteur discret, en bleu. */
.mention-poeme {
  margin: 0;
  font-size: clamp(10px, 1.25dvh, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.discret {
  position: relative;
  font-size: clamp(.75rem, .7rem + .2vw, .875rem);
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.discret:hover,
.discret:focus-visible {
  color: var(--color-accent);
  border-bottom-color: currentColor;
}

/* =========================================================================
   Accueil — objet à languettes
   ========================================================================= */

.accueil {
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.4dvh, 18px) var(--marge-x)
    max(clamp(14px, 3dvh, 32px), env(safe-area-inset-bottom));
  /* Les languettes retirées sortent de l'écran : rognées ici, elles n'élargissent jamais la page
     (sans quoi les navigateurs mobiles dézoomeraient). */
  overflow-x: clip;
}

.lignes {
  /* Conteneur de mesure : 100cqi = largeur exacte d'une rangée. */
  container-type: inline-size;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1320px;
}

.ligne {
  /* Largeur visible d'une languette ouverte : l'idéal, borné par la colonne du poème. */
  --tab-reveal: min(var(--reveal-ideal), calc((100cqi - var(--vers-max)) / 2 - var(--ecart-vers)));
  --taille-mot: min(var(--taille-mot-ideale), calc((var(--tab-reveal) - var(--padding-mot) - 6px) / 4.35));
  position: relative;
  display: grid;
  /* Colonnes latérales égales : le vers est toujours au centre exact de la rangée. */
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--vers-max)) minmax(0, 1fr);
  align-items: center;
  height: var(--hauteur-ligne);
  border-bottom: 1px solid var(--color-line);
}

.ligne:last-child { border-bottom: none; }

.vers {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
  font-size: var(--taille-vers);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--encre);
}

.vers-flip {
  display: inline-block;
  transform-origin: top left;
  will-change: transform;
}

/* Groupe languette : bloc unique qui porte le déplacement ; le mot lui appartient.
   Le pivot de l'inclinaison est le milieu de la partie qui reste visible une fois retirée :
   la languette ouverte s'incline sans quitter sa rangée. */
.languette-groupe {
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: 3;
  width: var(--tab-w, 97%);
  transition: transform var(--duree-ouverture) var(--ease-ouverture);
  transform: translateY(var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg));
}

.ligne[data-side="left"] .languette-groupe {
  left: 0;
  transform-origin: calc(100% - var(--tab-reveal) / 2) center;
}

.ligne[data-side="right"] .languette-groupe {
  right: 0;
  transform-origin: calc(var(--tab-reveal) / 2) center;
}

/* Une languette ouverte passe au-dessus de ses voisines : la zone tactile de son mot reste entière. */
.ligne.ouverte .languette-groupe { z-index: 4; }

.languette {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--color-tab);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
              0 2px 5px var(--color-shadow);
  border-bottom: 1px solid rgba(22, 19, 15, .14);
  transition: box-shadow var(--duree-ouverture) var(--ease-ouverture);
}

/* ——— Mot révélé ———
   Imprimé sur le bord intérieur de la languette, en bleu pétrole, plus grand qu'avant,
   sur une seule ligne. Un filet fin, sous le mot, le signale comme un lien ;
   il se renforce au survol, au focus et au toucher. */
.mot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  max-width: calc(var(--tab-reveal) - 4px);
  font-size: var(--taille-mot);
  line-height: 1.15;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 86, 107, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-reveal) ease-out, color .2s ease, text-decoration-color .2s ease;
  touch-action: manipulation;
}

/* Zone cliquable invisible, plus généreuse que le mot : toute la hauteur de la languette,
   et au moins 44 px ; elle déborde un peu vers le vers, jamais jusqu'à lui. */
.mot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  right: -6px;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

.ligne.ouverte .mot {
  opacity: 1;
  pointer-events: auto;
}

.ligne[data-side="left"] .mot {
  right: 0;
  padding-right: var(--padding-mot);
  text-align: right;
}

.ligne[data-side="right"] .mot {
  left: 0;
  padding-left: var(--padding-mot);
  text-align: left;
}

/* Entrées libres (« insert à déterminer ») : plus petites, sur deux lignes si la place manque. */
.ligne[data-type="free"] .mot {
  white-space: normal;
  font-size: calc(var(--taille-mot) * .78);
  line-height: 1.05;
}

.mot:hover,
.mot:focus-visible,
.mot:active,
.mot.contact {
  color: var(--color-accent-actif);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
}

.mot:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

/* Lettre A ou O : Saveya, la variante à losange de l'invitation. */
.lettre {
  position: absolute;
  top: 50%;
  font-family: var(--font-identite);
  font-feature-settings: "ss01";
  font-size: var(--taille-lettre);
  line-height: 1;
  color: var(--encre);
  -webkit-text-stroke: .012em currentColor;
  transition: color .2s ease;
}

.ligne[data-side="left"] .lettre {
  left: 30%;
  transform: translate(-50%, -50%);
}

.ligne[data-side="right"] .lettre {
  left: 70%;
  transform: translate(-50%, -50%);
}

.languette:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: -3px;
}

.languette:focus-visible .lettre,
.languette:active .lettre,
.lettre.contact {
  color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .ligne:not(.ouverte) .languette-groupe:hover .languette {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
                0 4px 9px var(--color-shadow);
  }
  .ligne[data-side="left"]:not(.ouverte) .languette-groupe:hover {
    transform: translate(2px, var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg));
  }
  .ligne[data-side="right"]:not(.ouverte) .languette-groupe:hover {
    transform: translate(-2px, var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg));
  }
  .ligne:not(.ouverte) .languette:hover .lettre {
    color: var(--color-accent);
  }
}

/* Ouverture : la languette se retire en gardant --tab-reveal visible. */
.ligne[data-side="left"].ouverte .languette-groupe {
  transform: translateX(calc(-100% + var(--tab-reveal))) rotate(var(--tab-rot-ouv, -1.1deg));
}

.ligne[data-side="right"].ouverte .languette-groupe {
  transform: translateX(calc(100% - var(--tab-reveal))) rotate(var(--tab-rot-ouv, 1.1deg));
}

.ligne.ouverte .languette {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px var(--color-shadow);
}

/* Longueurs et positions légèrement différentes — §3 */
.ligne:nth-child(1)  .languette-groupe { --tab-w: 96%; --tab-dy: 0px;  --tab-rot: -0.25deg; --tab-rot-ouv: -1.4deg; }
.ligne:nth-child(2)  .languette-groupe { --tab-w: 99%; --tab-dy: 1px;  --tab-rot: 0.2deg;   --tab-rot-ouv: 1.1deg; }
.ligne:nth-child(3)  .languette-groupe { --tab-w: 94%; --tab-dy: 0px;  --tab-rot: -0.35deg; --tab-rot-ouv: -0.9deg; }
.ligne:nth-child(4)  .languette-groupe { --tab-w: 100%; --tab-dy: 0px; --tab-rot: 0.15deg;  --tab-rot-ouv: 1.3deg; }
.ligne:nth-child(5)  .languette-groupe { --tab-w: 97%; --tab-dy: 1px;  --tab-rot: 0.3deg;   --tab-rot-ouv: 0.8deg; }
.ligne:nth-child(6)  .languette-groupe { --tab-w: 95%; --tab-dy: 0px;  --tab-rot: -0.2deg;  --tab-rot-ouv: -1.2deg; }
.ligne:nth-child(7)  .languette-groupe { --tab-w: 98%; --tab-dy: 0px;  --tab-rot: -0.3deg;  --tab-rot-ouv: -0.85deg; }
.ligne:nth-child(8)  .languette-groupe { --tab-w: 96%; --tab-dy: 1px;  --tab-rot: 0.25deg;  --tab-rot-ouv: 1.2deg; }
.ligne:nth-child(9)  .languette-groupe { --tab-w: 99%; --tab-dy: 0px;  --tab-rot: 0.18deg;  --tab-rot-ouv: 0.95deg; }
.ligne:nth-child(10) .languette-groupe { --tab-w: 93%; --tab-dy: 0px;  --tab-rot: -0.28deg; --tab-rot-ouv: -1.3deg; }
.ligne:nth-child(11) .languette-groupe { --tab-w: 97%; --tab-dy: 1px;  --tab-rot: -0.15deg; --tab-rot-ouv: -0.9deg; }
.ligne:nth-child(12) .languette-groupe { --tab-w: 100%; --tab-dy: 0px; --tab-rot: 0.32deg;  --tab-rot-ouv: 1.4deg; }
.ligne:nth-child(13) .languette-groupe { --tab-w: 95%; --tab-dy: 0px;  --tab-rot: 0.2deg;   --tab-rot-ouv: 1deg; }
.ligne:nth-child(14) .languette-groupe { --tab-w: 98%; --tab-dy: 1px;  --tab-rot: -0.22deg; --tab-rot-ouv: -1.05deg; }
.ligne:nth-child(15) .languette-groupe { --tab-w: 94%; --tab-dy: 0px;  --tab-rot: -0.3deg;  --tab-rot-ouv: -0.8deg; }
.ligne:nth-child(16) .languette-groupe { --tab-w: 99%; --tab-dy: 0px;  --tab-rot: 0.25deg;  --tab-rot-ouv: 1.15deg; }

@media (prefers-reduced-motion: reduce) {
  .languette-groupe {
    transition-duration: 180ms;
    transition-delay: 0s;
  }
  .mot { transition-duration: 180ms; }
  .ligne.ouverte .languette { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes invite-languette-gauche {
    0%, 100% { transform: translateY(var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg)); }
    40% { transform: translate(calc(-1 * var(--invite-dx)), var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg)); }
  }

  @keyframes invite-languette-droite {
    0%, 100% { transform: translateY(var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg)); }
    40% { transform: translate(var(--invite-dx), var(--tab-dy, 0)) rotate(var(--tab-rot, 0deg)); }
  }

  @keyframes invite-lettre {
    0%, 100% { color: var(--encre); }
    40% { color: var(--color-accent); }
  }

  .ligne[data-side="left"].invite .languette-groupe {
    animation: invite-languette-gauche 900ms ease-in-out 1;
  }

  .ligne[data-side="right"].invite .languette-groupe {
    animation: invite-languette-droite 900ms ease-in-out 1;
  }

  .ligne.invite .lettre {
    animation: invite-lettre 900ms ease-in-out 1;
  }
}

/* =========================================================================
   État final du poème-manifeste (16/16)
   ========================================================================= */

.lignes.finale .ligne.ouverte .mot {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-meta-1) var(--ease-ouverture);
}

.lignes.finale .languette-groupe { pointer-events: none; }

.poeme-final {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6dvh, 60px) clamp(20px, 6vw, 80px);
  opacity: 0;
  pointer-events: none;
}

.poeme-final.visible { opacity: 1; }

.poeme-final-corps {
  position: relative;
  max-width: min(640px, 92vw);
}

.poeme-final-corps::before {
  content: "";
  position: absolute;
  inset: -18% -26%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 66% 60% at 50% 50%,
    rgba(var(--papier-rgb), .85) 0%,
    rgba(var(--papier-rgb), .78) 34%,
    rgba(var(--papier-rgb), .42) 60%,
    rgba(var(--papier-rgb), 0) 82%
  );
  opacity: 0;
  transition: opacity var(--duree-meta-1) ease-out;
}

.poeme-final.visible .poeme-final-corps::before { opacity: 1; }

.poeme-final-vers {
  position: relative;
  margin: 0 0 .28em;
  text-align: left;
  font-size: calc(var(--taille-vers) * 1.45);
  line-height: 1.55;
  letter-spacing: var(--approche-texte);
  white-space: nowrap;
  color: var(--color-ink-dense);
  text-shadow:
    0 0 3px rgba(var(--papier-rgb), .95),
    0 0 7px rgba(var(--papier-rgb), .65);
}

.poeme-final-vers.espace-large { margin-bottom: 1em; }

/* Initiales de l'acrostiche : à l'encre, puis en bleu pétrole dans la seconde moitié du déplacement. */
.initiale-acrostiche { transition: color 240ms ease-out; }

.initiale-acrostiche.accentuee { color: var(--color-accent); }

@media (max-width: 480px) {
  .poeme-final-vers {
    font-size: calc(var(--taille-vers) * 1.3);
    line-height: 1.45;
  }
  .poeme-final-corps { max-width: 94vw; }
}

/* =========================================================================
   Transition de retour depuis l'état final — MAISON AO §5, §7
   ========================================================================= */

body.masque-total .entete,
body.masque-total #accueil,
body.masque-total .poeme-final {
  visibility: hidden;
}

.carton-transition {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6dvh, 60px) clamp(16px, 6vw, 120px);
  opacity: 0;
  pointer-events: none;
}

.carton-corps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6dvh, 18px);
  max-width: 100%;
  text-align: center;
}

.carton-corps::before {
  content: "";
  position: absolute;
  inset: -22% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 66% 60% at 50% 50%,
    rgba(var(--papier-rgb), .85) 0%,
    rgba(var(--papier-rgb), .78) 34%,
    rgba(var(--papier-rgb), .42) 60%,
    rgba(var(--papier-rgb), 0) 82%
  );
}

/* POÈME / MANIFESTE : capitales de Saveya, espacées comme le nom de la maison. */
.carton-ligne {
  margin: 0;
  font-family: var(--font-identite);
  text-transform: uppercase;
  letter-spacing: .16em;
  text-indent: .16em;
  font-size: min(clamp(40px, 8.75dvh, 84px), 11.5vw);
  line-height: 1.1;
  white-space: nowrap;
  -webkit-text-stroke: .008em currentColor;
}

.carton-poeme { color: var(--encre); }

.carton-manifeste { color: var(--color-accent); }

/* =========================================================================
   Vue plein écran — rubrique / entrée libre
   ========================================================================= */

.rubrique {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vh, 60px) clamp(18px, 6vw, 80px);
  overflow-y: auto;
}

.fermer {
  position: absolute;
  top: max(clamp(14px, 3vh, 30px), env(safe-area-inset-top));
  right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
  padding: 12px 14px;
  margin: -12px -14px;
  color: var(--encre-attenuee);
  font-size: clamp(12px, 1.6vh, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease;
  touch-action: manipulation;
}

.fermer:hover,
.fermer:focus-visible { color: var(--color-accent); }

.rubrique-corps {
  max-width: 620px;
  width: 100%;
  text-align: center;
}

.rubrique-lettre {
  display: block;
  font-family: var(--font-identite);
  font-feature-settings: "ss01";
  font-size: clamp(48px, 10vh, 108px);
  line-height: 1;
  margin-bottom: .2em;
  -webkit-text-stroke: .01em currentColor;
}

.rubrique-titre {
  font-size: clamp(30px, 5.4vh, 50px);
  line-height: 1.15;
  color: var(--color-accent);
  margin: 0 0 .6em;
  letter-spacing: var(--approche-grand);
  overflow-wrap: break-word;
}

.rubrique-texte {
  font-size: clamp(17px, 2.5vh, 21px);
  line-height: 1.65;
  letter-spacing: var(--approche-texte);
  margin: 0 auto 1.4em;
  max-width: 46ch;
}

.rubrique-image {
  margin: 0 auto 1.4em;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  background: var(--color-tab);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 1.5vh, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}

.rubrique-note {
  font-size: clamp(12px, 1.6vh, 14px);
  letter-spacing: .06em;
  color: var(--encre-attenuee);
}

/* =========================================================================
   Apercevoir — vue plein écran photographique, sans recadrage.
   ========================================================================= */

.apercu-photo {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8vh, 80px) clamp(24px, 6vw, 120px);
  overflow-y: auto;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-apercu) ease;
}

.apercu-photo.visible {
  opacity: 1;
  pointer-events: auto;
}

.apercu-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px) {
  .apercu-photo { padding: clamp(48px, 8vh, 64px) clamp(12px, 4vw, 28px); }
}

/* =========================================================================
   Responsive — de 320 px à 1920 px.
   ========================================================================= */

@media (max-width: 900px) {
  :root {
    --reveal-ideal: clamp(110px, 30vw, 200px);
    --taille-mot-ideale: clamp(16px, 2.5dvh, 21px);
  }
}

@media (max-width: 480px) {
  :root {
    --marge-x: clamp(6px, 2vw, 10px);
    --hauteur-ligne: clamp(24px, 5.1dvh, 40px);
    --taille-lettre: clamp(19px, 3.3dvh, 30px);
    --taille-vers: clamp(11.5px, 1.8dvh, 15px);
    --ecart-vers: 8px;
    --reveal-ideal: 150px;
    --padding-mot: 10px;
    --taille-mot-ideale: clamp(14px, 2.4dvh, 19px);
  }

  .entete {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

/* =========================================================================
   Adaptations tactiles (pointeur grossier uniquement)
   ========================================================================= */

@media (pointer: coarse) {
  .signature::after,
  #replier::after {
    content: "";
    position: absolute;
    inset: -10px -12px;
  }

  #replier::after { inset: -6px -12px -14px; }

  .languette,
  .mot,
  .signature,
  #replier,
  .fermer {
    touch-action: manipulation;
  }

  .languette-groupe {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Accueil et Replier, l'un sous l'autre : leurs zones tactiles ne se recouvrent pas. */
.entete .lien-accueil::after { inset: -12px -12px -6px; }