/*
  Habillage commun des pages secondaires de berry.coach — maquette du 02/10/2026.
  Même DA que l'accueil (index.html) : lavande, Bricolage Grotesque / Instrument Sans,
  cartes blanches, et Berry ACCOUDÉ sur le haut de la carte principale, comme dans l'app
  (poses des e-mails : da/sources-chatgpt/mails/).
  → wiki : [[Site web et déploiement]]
*/

:root {
  --lavande: #EEE6FF;
  --lavande-2: #E4D8FF;
  --encre: #1E0F3A;
  --encre-2: rgba(30, 15, 58, 0.72);
  --encre-3: rgba(30, 15, 58, 0.5);
  --violet: #9232D0;
  --violet-doux: #F3ECFF;
  --or: #F5B82E;
  --repas: #FF2D78;
  --muscu: #12C7A4;
  --sorties: #2BB3F3;
  --stats: #E8A33D;
  --danger: #E5484D;
  --carte: #FFFFFF;
  --trait: rgba(30, 15, 58, 0.1);
  --dsp: 'Bricolage Grotesque', system-ui, sans-serif;
  --txt: 'Instrument Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--lavande); color: var(--encre); font-family: var(--txt); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.dsp { font-family: var(--dsp); font-weight: 800; letter-spacing: -0.03em; }
.boite { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.etroite { max-width: 880px; }

/* ── Barre du haut (identique à l'accueil) ── */
.barre { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.barre .boite { pointer-events: auto; max-width: 1560px; }
.barre-in { display: flex; align-items: center; gap: 28px; background: rgba(255,255,255,0.92); border-radius: 22px; padding: 10px 10px 10px 16px; box-shadow: 0 8px 30px rgba(30,15,58,0.10); backdrop-filter: blur(10px); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 24px; }
.marque img { width: 34px; height: 34px; border-radius: 9px; }
.liens { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; }
.liens a { text-decoration: none; opacity: 0.82; }
.liens a:hover, .liens a.ici { opacity: 1; }
.liens a.ici { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; padding: 14px 22px; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; font-family: var(--txt); }
.btn-noir { background: var(--encre); color: #fff; }
.btn-clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--trait); }
.btn-or { background: var(--or); color: #241800; }

/* ── En-tête de page ── */
.entete { padding: 150px 0 0; }
.sur { font-weight: 700; font-size: 14px; letter-spacing: 0.16em; color: var(--violet); text-transform: uppercase; }
.entete h1 { font-size: clamp(40px, 5.4vw, 84px); line-height: 0.98; margin: 14px 0 18px; }
.chapo { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; color: var(--encre-2); max-width: 36em; margin: 0; }
.chapo strong { color: var(--encre); }
.meta { margin-top: 14px; font-size: 14px; color: var(--encre-3); font-weight: 600; }
.ariane { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--encre-3); }
.ariane a { text-decoration: none; color: var(--encre-2); }
.ariane a:hover { text-decoration: underline; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ── Carte principale + Berry accoudé sur son bord haut ── */
.scene { position: relative; margin-top: 150px; }
.accoude { position: absolute; right: 48px; bottom: 100%; width: clamp(170px, 18vw, 240px); margin-bottom: -18px; z-index: 2; pointer-events: none; transform-origin: 50% 100%; animation: accoude 0.7s cubic-bezier(.3,1.4,.5,1) both 0.15s; }
@keyframes accoude { from { transform: translateY(40px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
.carte { position: relative; z-index: 1; background: var(--carte); border-radius: 32px; padding: clamp(28px, 4vw, 56px); box-shadow: 0 30px 80px rgba(30,15,58,0.08); }
.carte + .carte { margin-top: 24px; }

/* ── Sections de contenu ── */
.bloc { padding: 90px 0 0; }
.bloc h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; margin: 12px 0 14px; }
.bloc > .boite > p, .intro { font-size: 18px; line-height: 1.55; color: var(--encre-2); max-width: 40em; margin: 0 0 28px; }

/* Chemin dans l'app : « Profil › Réglages › … » */
.chemin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--violet-doux); color: var(--violet); border-radius: 10px; padding: 5px 10px; font-weight: 700; font-size: 14px; }
.ou { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.ou.app { background: #E6FBF5; color: #0B8F76; }
.ou.mail { background: #FFF1D6; color: #8A5A00; }

/* Liste « une demande, un endroit » */
.rangees { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rangees li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--trait); }
.rangees li:first-child { border-top: 0; padding-top: 0; }
.rangees .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--violet-doux); color: var(--violet); display: flex; align-items: center; justify-content: center; }
.rangees .ic svg { width: 26px; height: 26px; }
.rangees b { font-family: var(--dsp); font-size: 21px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rangees p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--encre-2); }
.rangees .chemin { margin-top: 10px; }

/* Tuiles */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tuile { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 30px rgba(30,15,58,0.05); }
.tuile .num { font-family: var(--dsp); font-weight: 800; font-size: 15px; color: var(--violet); }
.tuile b { display: block; font-family: var(--dsp); font-size: 21px; margin: 10px 0 6px; letter-spacing: -0.01em; }
.tuile span { font-size: 15px; line-height: 1.45; color: var(--encre-2); }
.tuile.repas { background: var(--repas); color: #fff; } .tuile.muscu { background: var(--muscu); color: #fff; } .tuile.sorties { background: var(--sorties); color: #fff; }
.tuile.repas .num, .tuile.muscu .num, .tuile.sorties .num, .tuile.repas span, .tuile.muscu span, .tuile.sorties span { color: rgba(255,255,255,0.9); }

/* Articles groupés */
.groupes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.groupe { background: #fff; border-radius: 24px; padding: 22px 22px 12px; box-shadow: 0 10px 30px rgba(30,15,58,0.05); }
.groupe h3 { margin: 0 0 6px; font-family: var(--dsp); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.groupe a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--trait); text-decoration: none; font-weight: 700; font-size: 16px; }
.groupe a:first-of-type { border-top: 0; }
.groupe a::after { content: '›'; font-size: 22px; color: var(--encre-3); transition: transform 0.2s; }
.groupe a:hover::after { transform: translateX(4px); color: var(--violet); }

/* Questions fréquentes */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: 22px; padding: 0 24px; box-shadow: 0 10px 30px rgba(30,15,58,0.05); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: var(--dsp); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--violet-doux); color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--encre-2); }

/* Deux cartes côte à côte */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo .tuile h3 { margin: 0 0 8px; font-family: var(--dsp); font-size: 21px; }
.duo .tuile p { margin: 0; }
.duo .tuile a { font-weight: 700; color: var(--violet); }

/* Bandeau de contact */
.contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--encre); color: #fff; border-radius: 32px; padding: clamp(28px, 4vw, 48px); }
.contact h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 42px); }
.contact p { margin: 0; color: rgba(255,255,255,0.78); font-size: 17px; line-height: 1.5; max-width: 34em; }
.contact .btn { background: #fff; color: var(--encre); }

/* ── Texte long (articles, légal) ── */
.prose { font-size: 17px; line-height: 1.7; color: var(--encre-2); }
.prose h2 { font-family: var(--dsp); font-weight: 800; color: var(--encre); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.1; margin: 48px 0 14px; scroll-margin-top: 110px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--dsp); font-weight: 700; color: var(--encre); font-size: 20px; margin: 30px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--encre); }
.prose a { color: var(--violet); font-weight: 700; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 18px; }
.prose ul li { position: relative; padding-left: 26px; margin: 8px 0; }
.prose ul li::before { content: ''; position: absolute; left: 6px; top: 0.7em; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.prose ol { counter-reset: e; padding-left: 0; list-style: none; margin: 0 0 18px; }
.prose ol li { counter-increment: e; position: relative; padding: 8px 0 8px 48px; }
.prose ol li::before { content: counter(e); position: absolute; left: 0; top: 4px; width: 34px; height: 34px; border-radius: 12px; background: var(--violet-doux); color: var(--violet); font-family: var(--dsp); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.alerte { background: #FFF1F1; border-radius: 22px; padding: 20px 22px 6px 62px; position: relative; margin: 0 0 22px; color: #5B1A1D; }
.alerte::before { content: '!'; position: absolute; left: 20px; top: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--danger); color: #fff; font-family: var(--dsp); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.alerte strong { color: #5B1A1D; }

/* Mise en page légale : sommaire collant + texte */
.deux-col { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.sommaire { position: sticky; top: 110px; background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 10px 30px rgba(30,15,58,0.05); }
.sommaire b { display: block; font-family: var(--dsp); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; }
.sommaire a { display: block; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--encre-2); }
.sommaire a:hover { background: var(--violet-doux); color: var(--violet); }

/* À lire ensuite */
.suite { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.suite a { display: block; background: #fff; border-radius: 24px; padding: 22px; text-decoration: none; box-shadow: 0 10px 30px rgba(30,15,58,0.05); transition: transform 0.2s; }
.suite a:hover { transform: translateY(-3px); }
.suite .bientot { display: block; background: #fff; border-radius: 24px; padding: 22px; opacity: 0.62; box-shadow: 0 10px 30px rgba(30,15,58,0.05); } /* « à lire ensuite » pas encore écrit : sans lien */
.suite .bientot h3 { margin: 0 0 6px; font-family: var(--dsp); font-size: 20px; }
.suite .bientot p { margin: 0; color: var(--encre-2); line-height: 1.45; }
.suite h3 { margin: 0 0 6px; font-family: var(--dsp); font-size: 20px; }
.suite p { margin: 0; color: var(--encre-2); line-height: 1.45; }

/* Étapes numérotées en grand (pages de retour des e-mails) */
.etapes { list-style: none; counter-reset: e; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; font-size: 18px; line-height: 1.4; }
.etapes li::before { content: counter(e); width: 44px; height: 44px; border-radius: 14px; background: var(--violet); color: #fff; font-family: var(--dsp); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.note { background: var(--violet-doux); border-radius: 18px; padding: 16px 18px; font-size: 16px; line-height: 1.5; color: var(--encre-2); }

/* Page courte centrée (404, retour des e-mails, partage) */
.court { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 130px 0 40px; }
.court .scene { margin-top: 120px; }
.court .carte { text-align: left; }

/* ── Blocs des sources de contenu (da/site-sources/aide, da/site-sources/legal) ──
   Les articles et les textes légaux sont écrits une fois, avec leurs propres classes ; elles prennent ici
   l'habillage de la DA. Ne pas les renommer dans les sources : les générateurs les lisent telles quelles. */
.prose .path { display: inline; background: var(--violet-doux); color: var(--violet); border-radius: 8px; padding: 2px 8px; font-weight: 700; font-size: 0.92em; white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* ⚠️ `.etapes` sert à deux endroits : les GRANDES étapes des retours d'e-mail (grille, chiffre de 44 px) et
   les étapes d'un ARTICLE, au fil du texte. Dans un article, la grille découpait chaque mot et chaque <strong>
   en cellule (« Ouvre / ton / Profil », vu le 02/10) : dans .prose, on revient à la liste numérotée du texte. */
.prose .etapes { display: block; margin: 0 0 18px; }
.prose .etapes li { display: block; position: relative; padding: 8px 0 8px 48px; font-size: inherit; line-height: 1.6; }
.prose .etapes li::before { position: absolute; left: 0; top: 4px; width: 34px; height: 34px; border-radius: 12px; background: var(--violet-doux); color: var(--violet); font-size: 16px; }
.prose .route { list-style: none; padding: 0; margin: 0 0 22px; }
.prose .route li { padding: 16px 0 16px 0; border-top: 1px solid var(--trait); display: grid; grid-template-columns: 220px 1fr; gap: 6px 24px; }
.prose .route li::before { display: none; }
.prose .route li:last-child { border-bottom: 1px solid var(--trait); }
.prose .route b { color: var(--encre); font-family: var(--dsp); font-weight: 700; }
.prose section { scroll-margin-top: 110px; }
.prose section + section { border-top: 1px solid var(--trait); margin-top: 40px; padding-top: 6px; }
.prose h2 .n { color: var(--violet); margin-right: 8px; font-variant-numeric: tabular-nums; }
.prose em { font-style: normal; color: var(--encre); }
.prose .loi { font-size: 0.85em; color: var(--encre-3); border-bottom: 1px dotted var(--encre-3); }
.prose .encadre { background: var(--violet-doux); border-radius: 20px; padding: 18px 20px 4px; margin: 0 0 20px; }
.prose .areserve { background: #FFF6DE; border-radius: 20px; padding: 18px 20px 4px; margin: 0 0 20px; color: #5A4300; }
.prose .formulaire { background: var(--lavande); border: 2px dashed var(--lavande-2); border-radius: 20px; padding: 18px 20px; margin: 0 0 20px; white-space: pre-wrap; font-size: 15px; line-height: 1.7; }
.prose .tab { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.prose .tab th, .prose .tab td { text-align: left; vertical-align: top; padding: 12px 12px; border-bottom: 1px solid var(--trait); line-height: 1.5; }
.prose .tab th { font-family: var(--dsp); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.prose .tab td:first-child { color: var(--encre); font-weight: 600; }

/* ⚠️ `hidden` doit gagner : les scripts de rebond et de /s/ masquent des boutons (.btn est en inline-flex,
   ce qui l'emportait sur le `display: none` du navigateur et laissait voir « Ouvrir Berry » sans lien). */
[hidden] { display: none !important; }

/* ── Pied de page ── */
.pied { margin-top: 120px; background: var(--encre); color: #fff; padding: 64px 0 34px; border-radius: 40px 40px 0 0; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied .marque { color: #fff; }
.pied p { color: rgba(255,255,255,0.7); line-height: 1.5; margin: 14px 0 0; max-width: 22em; }
.pied h4 { margin: 0 0 12px; font-family: var(--dsp); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.pied nav a { display: block; text-decoration: none; padding: 5px 0; color: rgba(255,255,255,0.88); font-weight: 600; }
.pied nav a:hover { color: #fff; text-decoration: underline; }
.pied-bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,0.6); }

/* ── Petits écrans ── */
@media (max-width: 1000px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groupes { grid-template-columns: 1fr 1fr; }
  .deux-col { grid-template-columns: 1fr; }
  .sommaire { position: static; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .boite { padding: 0 16px; }
  /* Navigation au téléphone (Kelvin, 02/10 : « la version mobile devrait avoir une navigation facile par
     le haut aussi ») : les liens ne disparaissent plus, ils passent sous la barre en pastilles aux couleurs des
     domaines, qu'on fait défiler au doigt. La barre reste accrochée en haut. */
  .barre { top: 8px; }
  .barre-in { flex-wrap: wrap; row-gap: 8px; padding: 8px 8px 8px 12px; }
  .liens { display: flex; order: 3; flex: 1 0 100%; margin: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 0 2px; scroll-padding: 0 12px; }
  .liens::-webkit-scrollbar { display: none; }
  .liens a { flex: none; opacity: 1; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
  .liens a:nth-child(1) { background: var(--repas); }
  .liens a:nth-child(2) { background: var(--muscu); }
  .liens a:nth-child(3) { background: var(--sorties); }
  .liens a:nth-child(4) { background: var(--stats); }
  .liens a:nth-child(5) { background: var(--encre); }
  .liens a:nth-child(6) { background: var(--lavande); color: var(--encre); }
  /* Pastille active : contour DEDANS. Un contour extérieur et un agrandissement dépassaient de la rangée,
     qui coupe ce qui sort de ses bords (elle défile) : la pastille de gauche était rognée (Kelvin, 02/10). */
  .liens a.ici { text-decoration: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.95); }
  .liens a.ici:nth-child(6) { box-shadow: inset 0 0 0 3px var(--encre); }
  [id] { scroll-margin-top: 120px; }
  .barre-in .btn { margin-left: auto; padding: 11px 16px; }
  .entete { padding-top: 160px; } /* la barre a maintenant deux rangées */
  .scene, .court .scene { margin-top: 120px; }
  .accoude { right: 16px; width: 150px; margin-bottom: -12px; }
  .carte { border-radius: 26px; }
  .groupes, .duo, .suite { grid-template-columns: 1fr; }
  .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rangees li { grid-template-columns: 1fr; gap: 12px; }
  .pied-grille { grid-template-columns: 1fr; }
  .prose .route li { grid-template-columns: 1fr; gap: 2px; }
  .prose .tab, .prose .tab tbody, .prose .tab tr, .prose .tab td { display: block; width: 100%; }
  .prose .tab thead { display: none; }
  .prose .tab tr { padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .prose .tab td { border: 0; padding: 2px 0; }
  .faq summary { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .accoude { animation: none; }
  html { scroll-behavior: auto; }
}