/* Page d'accueil.
   Meme charte que les outils (jetons de maquette.css), mais une page qui se
   lit : texte a 17 px, lignes de 70 caracteres au plus, gris fonces. La
   lisibilite pour tous les ages est une exigence du projet, pas un style. */

.home {max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding-bottom:12px}

/* Dans une grille, un enfant ne descend pas sous sa largeur minimale : le
   tableau (620 px) elargissait toute la page sur un telephone au lieu de
   defiler dans son cadre. Chaque niveau de grille doit donc l'autoriser. */
.home > *, .home-section > *, .home-tool > * {min-width:0}
.home-section {grid-template-columns:minmax(0,1fr)}

.home-hero {display:grid;gap:16px;padding:8px 0 4px;/*max-width:820px*/}
.home-eyebrow {margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.home h1 {margin:0;font-size:clamp(31px,4.3vw,48px);line-height:1.1;letter-spacing:-.035em;color:var(--text);text-wrap:balance}
.home-lead {margin:0;font-size:19px;line-height:1.65;color:var(--text);/*max-width:68ch*/}
.home-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.home-cta {min-height:50px;padding:0 22px;font-size:16px;border-radius:12px;text-decoration:none}

.home-section {display:grid;gap:18px}
.home h2 {margin:0;font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.home-text, .home-prose p {margin:0;font-size:17px;line-height:1.7;color:var(--text);/*max-width:70ch*/}
.home a:not(.btn) {color:var(--accent);font-weight:700;text-underline-offset:3px}

/* Les outils : une grille dont les cartes gardent le meme dessin */
.home-tools {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.home-tool {display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.home .home-tool-ico {width:64px;height:64px;border-radius:18px;color:inherit;text-decoration:none;margin-bottom:8px}
.home-tool {transition:box-shadow .18s ease,border-color .18s ease}
.home-tool:hover {border-color:var(--accentLine2);box-shadow:0 10px 28px var(--accentRing)}
.home-tool .home-tool-ico {color:var(--accent)}
.home-tool .tool-icon--countdown,.home-tool .tool-icon--cooking {color:var(--orange)}
.home-tool .tool-icon--breathing,.home-tool .tool-icon--sport,.home-tool .tool-icon--race {color:var(--green)}
.home-tool .tool-icon--pomodoro {color:var(--red)}
.home-tool .tool-icon--duel,.home-tool .tool-icon--reading {color:var(--blue)}
.home-tool h3 {margin:4px 0 0;font-size:20px;letter-spacing:-.02em}
.home-tool h3 a {color:var(--text) !important;text-decoration:none}
.home-tool h3 a:hover, .home-tool h3 a:focus-visible {color:var(--accent) !important;text-decoration:underline}
.home-tool p {margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.home .home-tool-meta {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;font-size:15px}
.home-badge {font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--accentLine);color:var(--text);background:var(--accentTint)}

/* Texte courant */
.home-prose h3 {margin:6px 0 0;font-size:19px}
.home-prose .g-list {margin:0;padding-left:1.2em;display:grid;gap:10px;max-width:72ch}
.home-prose .g-list li {font-size:17px;line-height:1.65;color:var(--text)}
.home-prose .g-list strong {color:var(--text)}
.home-prose .g-note {margin:0;padding:14px 18px;border-radius:12px;background:var(--accentTint);border:1px solid var(--accentLine)}

/* Le tableau defile dans son propre cadre sur un telephone, pas la page */
.home .g-table-wrap {overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.home .g-table {width:100%;min-width:620px;border-collapse:collapse;font-size:16px}
.home .g-table th, .home .g-table td {text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line);line-height:1.55;color:var(--text)}
.home .g-table thead th {font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--accentTint)}
.home .g-table tbody tr:last-child th, .home .g-table tbody tr:last-child td {border-bottom:0}
.home .g-table tbody th {font-weight:600}

/* FAQ : questions visibles d'emblee, sans accordeon a ouvrir */
.home-faq {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.home-faq-item {display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--line)}
.home-faq-item h3 {margin:0;font-size:18px;line-height:1.35;color:var(--text)}
.home-faq-item p {margin:0;font-size:16px;line-height:1.65;color:var(--text)}

.home-guides {padding:28px;border-radius:var(--radius);background:var(--accentTint);border:1px solid var(--accentLine);justify-items:start}

.home a:focus-visible, .home .btn:focus-visible {outline:3px solid var(--accent);outline-offset:3px}

@media (max-width:900px) {
  .home-tools {grid-template-columns:repeat(2,minmax(0,1fr))}
  .home {gap:44px}
  .home-faq {grid-template-columns:1fr}
}
@media (max-width:600px) {
  .home-tools {grid-template-columns:minmax(0,1fr)}
  .home-lead {font-size:18px}
  .home-actions {flex-direction:column}
  .home-cta {justify-content:center;width:100%}
  .home-tool {padding:18px}
  .home-guides {padding:20px}
}

/* Sans menu gauche : une seule colonne, contenu centre. */
.app-shell.no-sidebar {grid-template-columns:minmax(0,1fr)}
.no-sidebar .content {max-width:1180px}
.no-sidebar .home {margin-inline:auto}
@media (prefers-reduced-motion:reduce) {.home-tool {transition:none}}