/* ===========================================================================
   LA CARTE PLIABLE des pages publiques (mission « accueil 02 », 14/10/2026).
   Gabarit : `partials/carte_pliable.html`. Chargée APRÈS `accordeon.css`,
   qu'elle ne modifie pas : elle n'ajuste que ce qui distingue une carte d'un
   encadré repliable.

   L'aspect est celui d'une TUILE de l'application (`.tuile`, `tuiles.css`) :
   même bord, même rayon, même ombre, même surface, icône Noto à la taille du
   jeton, titre en gras, une ligne en texte secondaire. Que des jetons.
   =========================================================================== */

.carte-pliable {
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon-large, 16px);
  background: var(--tab-surface, #FFFFFF);
  box-shadow: var(--tab-ombre-douce, 0 1px 2px rgba(17, 17, 17, 0.06));
  color: var(--tab-texte-principal, #111111);
}
.carte-pliable:hover,
.carte-pliable:focus-within { border-color: var(--tab-accent, #3F6FA9); }

/* Le titre de la carte est un <h2> (ou <h3>) qui porte le bouton : sa taille
   est celle d'une tuile, pas celle d'un titre de page. */
.carte-pliable__titre {
  margin: 0;
  font-size: var(--tab-taille-base, 1rem);
  line-height: var(--tab-interligne, 1.55);
}

/* Toute la tête de la carte est le bouton : le triangle, l'icône, le titre et
   sa ligne. La marge intérieure est celle d'une tuile. */
.carte-pliable__bouton {
  gap: var(--tab-espace-2, 16px);
  padding: var(--tab-encadre-marge, 20px);
  border-radius: var(--tab-rayon-large, 16px);
}
/* Le contour de focus reste DANS la carte : l'écart de l'accordéon (4 px vers
   l'extérieur) le ferait chevaucher le bord. */
.carte-pliable__bouton:focus-visible {
  outline-offset: calc(var(--tab-contour-focus, 2px) * -2);
}
/* Le triangle a déjà son écart à droite dans `accordeon.css`. */
.carte-pliable__bouton .accordeon__triangle { margin-inline-end: 0; }

.carte-pliable__icone,
.carte-pliable__drapeau { flex: none; }
.carte-pliable__icone .icone {
  display: block;
  inline-size: var(--tab-icone-tuile, 32px);
  block-size: var(--tab-icone-tuile, 32px);
}
.carte-pliable__drapeau {
  font-size: var(--tab-taille-titre, 1.5rem);
  margin-inline-end: 0;
}

.carte-pliable__textes {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.carte-pliable__libelle {
  font-weight: 700;
  font-size: var(--tab-taille-moyenne, 1.125rem);
  line-height: var(--tab-interligne, 1.55);
}
.carte-pliable__ligne {
  font-weight: 400;
  font-size: var(--tab-taille-petite, 0.8125rem);
  color: var(--tab-texte-secondaire, #666666);
}

/* Le corps déplié : dans la carte, sous la tête, à la même marge. */
.carte-pliable .carte-pliable__corps {
  margin-block-start: 0;
  padding: 0 var(--tab-encadre-marge, 20px) var(--tab-encadre-marge, 20px);
  line-height: var(--tab-interligne, 1.55);
}
/* AUCUNE césure dans les cartes : Chromium coupait « TA-BULA » (mesuré à
   375 px, 14/10/2026), et un nom propre ne se coupe pas. Les mots les plus
   longs (allemand compris) tiennent à 320 px sans elle
   (`scripts/accueil02_mesures.py`). */
.carte-pliable__corps > :last-child { margin-block-end: 0; }
.carte-pliable__corps ul { margin-block: 0 var(--tab-espace-2, 16px); padding-inline-start: var(--tab-espace-3, 32px); }
.carte-pliable__corps li { margin-block-end: var(--tab-espace-1, 8px); }
.carte-pliable__corps h3 {
  font-size: var(--tab-taille-base, 1rem);
  margin-block: var(--tab-espace-2, 16px) var(--tab-espace-1, 8px);
}

/* Les cartes d'une page : une pile, ou une grille de deux colonnes à partir
   de la largeur où l'accueil range déjà son champ et son bouton côte à côte
   (721 px, `accueil.css`). Une carte dépliée ne tire pas sa voisine. */
.cartes-pile,
.cartes-grille {
  display: grid;
  gap: var(--tab-espace-2, 16px);
  align-items: start;
}
@media (min-width: 721px) {
  .cartes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}