/* Pages du socle SEO (scripts/build-socle.js) et bloc de l'accueil servi aux
   robots (scripts/build-accueil.js). Copiée en /ressources/socle.css.
   Couleurs et polices : DESIGN.md (palette « Corail et nuit », décision du
   fondateur du 27/10/2026), une seule source ici pour ces pages, mêmes valeurs
   que src/index.css. L'accordéon « Tout comprendre » de l'accueil React
   (.socle-accordeon) lit cette même feuille : le texte affiché au visiteur et
   le texte servi aux robots ont la même mise en forme. Toutes les classes commencent par socle- : la
   feuille peut être chargée à côté de l'application sans rien toucher. */

.socle-corps, .socle-repli, .socle-accordeon {
  --fond: #FFF6F2;
  --surface: #FFFFFF;
  --texte: #16131F;
  --texte-2: #55505F;
  --action: #D33447;
  --action-appui: #B02A3B;
  --accent: #FFC93C;
  --accent-doux: #FFF0C2;
  --accent-texte: #6B4A00;
  --bandeau: #16131F;
  --surtitre: #FFC93C;
  --nuit-texte2: #E6E1EE;
  --bordure: #E6DDE3;
  --bordure-forte: #9C8F9A;
  --titres: 'Zilla Slab', Georgia, serif;
  --texte-police: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.socle-corps { margin: 0; background: var(--fond); color: var(--texte); font: 400 18px/1.65 var(--texte-police); }
.socle-repli { background: var(--fond); color: var(--texte); font: 400 18px/1.65 var(--texte-police); }
.socle-corps *, .socle-repli *, .socle-accordeon * { box-sizing: border-box; }

.socle-saut { position: absolute; left: -9999px; top: 0; }
.socle-saut:focus { left: 16px; top: 16px; z-index: 100; background: var(--surface); color: var(--action); padding: 12px 16px; border-radius: 8px; }

.socle { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.socle a { color: var(--action-appui); text-decoration: underline; text-underline-offset: 3px; }
.socle a:focus-visible, .socle-pied a:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 4px; }

.socle-fil { font-size: 16px; color: var(--texte-2); margin-bottom: 16px; }

.socle-tete { background: var(--bandeau); color: #fff; border-radius: 16px; padding: 24px 20px; margin: 0 -4px 32px; }
.socle-tete h1 { font: 700 30px/1.2 var(--titres); margin: 0 0 16px; }
.socle-reponse { font-size: 19px; margin: 0 0 16px; }
.socle-maj { font-size: 16px; color: var(--surtitre); margin: 0 0 20px; }
.socle-tete a.socle-bouton { margin-top: 4px; }

.socle-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 24px; border-radius: 12px;
  background: var(--action); color: #fff !important; text-decoration: none !important;
  font: 700 18px/1.2 var(--texte-police); border-radius: 999px;
}
.socle-bouton:hover { background: var(--action-appui); }

.socle h2 { font: 700 24px/1.25 var(--titres); margin: 40px 0 12px; color: var(--texte); }
.socle h3 { font: 600 19px/1.35 var(--texte-police); margin: 24px 0 8px; }
.socle p, .socle li { margin: 0 0 14px; }
.socle ul, .socle ol { padding-left: 24px; margin: 0 0 16px; }

.socle-retenir { background: var(--surface); border: 1px solid var(--bordure); border-top: 5px solid var(--accent); border-radius: 12px; padding: 4px 20px 8px; margin: 32px 0; }
.socle-retenir h2 { margin-top: 20px; }

.socle-avertissement { background: var(--accent-doux); color: var(--accent-texte); border-radius: 12px; padding: 16px 20px; }

.socle-tableau { overflow-x: auto; margin: 24px 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; }
.socle-tableau:focus-visible { outline: 3px solid var(--action); }
.socle-tableau table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 16px; }
.socle-tableau caption { text-align: left; font-weight: 600; padding: 14px 16px 6px; }
.socle-tableau th, .socle-tableau td { text-align: left; vertical-align: top; padding: 10px 16px; border-top: 1px solid var(--bordure); }
.socle-tableau thead th { background: var(--fond); }

.socle-faq h3 { color: var(--texte); }
.socle-sources { font-size: 16px; }
.socle-sources li { overflow-wrap: anywhere; }
.socle-relecteur { font-size: 16px; color: var(--texte-2); border-top: 1px solid var(--bordure); padding-top: 16px; margin-top: 32px; }

.socle-appel { background: var(--surface); border: 1px solid var(--bordure); border-top: 5px solid var(--action); border-radius: 16px; padding: 8px 20px 20px; margin-top: 40px; }

.socle-pied { background: var(--bandeau); color: #fff; padding: 24px 16px 32px; font-size: 16px; }
.socle-pied nav { max-width: 760px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.socle-pied a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
.socle-pied p { max-width: 760px; margin: 0 auto; color: var(--nuit-texte2); }

/* Bloc de l'accueil, dans le texte servi avant l'application */
.socle-repli { padding: 32px 16px 40px; }
.socle-repli .socle-repli-in { max-width: 760px; margin: 0 auto; }
.socle-repli h1 { font: 700 32px/1.2 var(--titres); margin: 0 0 12px; }
.socle-repli h2 { font: 700 24px/1.25 var(--titres); margin: 32px 0 12px; }
.socle-repli ul { list-style: none; padding: 0; margin: 0; }
.socle-repli li { margin: 0 0 8px; }
.socle-repli a { color: var(--action); display: inline-flex; align-items: center; min-height: 44px; }
.socle-repli time { color: var(--texte-2); font-size: 16px; margin-left: 8px; white-space: nowrap; }
.socle-repli .socle-legal { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 16px; }

@media (min-width: 768px) {
  .socle { padding: 40px 24px 64px; }
  .socle-tete { padding: 40px 40px; margin: 0 0 40px; }
  .socle-tete h1 { font-size: 40px; }
  .socle h2 { font-size: 28px; }
  .socle-repli h1 { font-size: 40px; }
}

/* Accordéon « Tout comprendre » de l'accueil React : le même corps de page,
   titres décalés d'un niveau (le h1 de l'accueil est l'ouverture). */
.socle-accordeon { color: var(--texte); font: 400 18px/1.65 var(--texte-police); }
.socle-accordeon .socle { padding-top: 16px; }
.socle-accordeon .socle-tete h2 { font: 700 30px/1.2 var(--titres); margin: 0 0 16px; color: #fff; }
.socle-accordeon .socle h3 { font: 700 24px/1.25 var(--titres); margin: 40px 0 12px; color: var(--texte); }
.socle-accordeon .socle h4 { font: 600 19px/1.35 var(--texte-police); margin: 24px 0 8px; }
.socle-accordeon .socle-retenir h3 { margin-top: 20px; }
@media (min-width: 768px) {
  .socle-accordeon .socle-tete h2 { font-size: 40px; }
  .socle-accordeon .socle h3 { font-size: 28px; }
}