/*
 * Minou · système de design web (appminou.com)
 * Minou 11 · UI, 16 octobre 2026. Référence : equipe/ui/web/systeme-de-design-web.md
 * Mobile d'abord. Aucune ressource externe, aucune police autre que Nunito.
 * Les jetons sont ceux de l'app (src/theme/index.ts) : ne pas en inventer.
 */

@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('/polices/Nunito_400Regular.woff2') format('woff2'), url('/polices/Nunito_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('/polices/Nunito_700Bold.woff2') format('woff2'), url('/polices/Nunito_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/polices/Nunito_800ExtraBold.woff2') format('woff2'), url('/polices/Nunito_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('/polices/Nunito_900Black.woff2') format('woff2'), url('/polices/Nunito_900Black.ttf') format('truetype'); }

:root {
  /* Couleurs : celles de l'app, rien d'autre. */
  --fond: #FFFBF5;          /* crème, fond de toutes les pages */
  --fond-alt: #FFF4EA;      /* crème plus chaud, une section sur deux */
  --carte: #FFFFFF;
  --bordure: #EDE0D0;
  --marque: #FF7E5F;        /* corail : aplats, boutons, illustrations */
  --marque-pale: #FFEDE7;
  --marque-texte: #B8452C;  /* corail lisible en texte et liens (5,19) */
  --sur-marque: #33261E;    /* texte posé SUR le corail (5,85) */
  --perdu: #E63946;         /* rouge : seulement le chat perdu */
  --perdu-pale: #FDE8EA;
  --perdu-texte: #B8232F;   /* rouge lisible en texte (5,39) */
  --sauge-pale: #EEF4F0; --sauge-texte: #4F7A5B;
  --texte: #33261E;         /* encre brune (14,2) */
  --texte-doux: #7A6A5D;    /* secondaire lisible (5,03) */
  --ombre: 61, 44, 30;      /* ombres brunes, jamais grises */

  /* Typographie : Nunito seule. Titres 800/900, corps 400, rien sous 14 px sur le web. */
  --police: 'Nunito', system-ui, sans-serif;
  --t-h1: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);     /* 36 → 56 */
  --t-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);  /* 28 → 40 */
  --t-h3: 1.3125rem;                                /* 21 */
  --t-chapeau: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); /* 19 → 22 */
  --t-corps: 1.0625rem;                             /* 17 mobile, 18 bureau */
  --t-petit: .875rem;                               /* 14 */
  --interligne: 1.6;
  --mesure: 66ch;                                   /* largeur de lecture d'un guide */

  /* Espaces (multiples de 4), rayons, ombres. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-rond: 999px;
  --ombre-douce: 0 5px 14px rgba(var(--ombre), .07);
  --ombre-flottante: 0 16px 34px rgba(var(--ombre), .14);
  --page: 1120px;
}
@media (min-width: 900px) { :root { --t-corps: 1.125rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 var(--t-corps)/var(--interligne) var(--police); }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-weight: 900; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); font-weight: 800; }
h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.3; }
p { margin: 0; }
a { color: var(--marque-texte); font-weight: 700; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--marque-texte); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Mise en page */
.page { width: min(100% - 2 * var(--e4), var(--page)); margin-inline: auto; }
.section { padding-block: var(--e8); }
.section--alt { background: var(--fond-alt); }
@media (min-width: 900px) { .section { padding-block: var(--e9); } }
.chapeau { font-size: var(--t-chapeau); color: var(--texte-doux); max-width: 38ch; }
.surtitre { font-size: var(--t-petit); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--marque-texte); }
.trait { width: 72px; height: 5px; border-radius: 9px; background: var(--marque); margin-top: var(--e3); }
.deux { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 900px) { .deux { grid-template-columns: 1fr 1fr; gap: var(--e8); } .deux--inverse > :first-child { order: 2; } }
.grille { display: grid; gap: var(--e4); }
@media (min-width: 700px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

/* En-tête : logo, navigation, langue. */
.entete { position: sticky; top: 0; z-index: 10; background: rgba(255, 251, 245, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bordure); }
.entete .page { display: flex; align-items: center; gap: var(--e4); min-height: 64px; }
.logo { display: flex; align-items: center; gap: var(--e2); font-weight: 900; font-size: 1.375rem; color: var(--marque-texte); text-decoration: none; }
.nav { display: none; gap: var(--e5); margin-left: auto; }
.nav a { color: var(--texte); font-weight: 800; text-decoration: none; }
.nav a[aria-current] { color: var(--marque-texte); }
@media (min-width: 900px) { .nav { display: flex; } }
.lien-perdu { margin-left: auto; color: var(--perdu-texte); font-weight: 800; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .lien-perdu { display: none; } }
.langue { margin-left: 0; min-height: 44px; padding: 0 var(--e4); border: 1px solid var(--bordure); border-radius: var(--r-rond); background: var(--carte); font: 800 var(--t-petit) var(--police); color: var(--texte); display: inline-flex; align-items: center; }


/* Boutons et badges */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 52px; padding: 0 var(--e5); border-radius: var(--r-lg); font: 800 1rem var(--police); text-decoration: none; }
.btn--plein { background: var(--marque); color: var(--sur-marque); box-shadow: var(--ombre-douce); }
.btn--contour { border: 1.5px solid var(--marque); color: var(--marque-texte); }
.btn--alerte { background: var(--perdu); color: #fff; font-size: 1.1875rem; } /* 19 px : seuil du texte gros */
.badges { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.badges img { height: 48px; width: auto; }

/* Cartes et blocs */
.carte { background: var(--carte); border-radius: var(--r-xl); padding: var(--e5); box-shadow: var(--ombre-douce); }
.carte h3 { margin-bottom: var(--e2); }
.carte p { color: var(--texte-doux); }
.carte-lien { display: block; text-decoration: none; color: inherit; font-weight: 400; transition: transform .15s; }
.carte-lien:hover { transform: translateY(-2px); }
.carte-lien .plus { color: var(--marque-texte); font-weight: 800; margin-top: var(--e3); display: inline-block; }
.halo { width: 64px; height: 64px; border-radius: var(--r-rond); background: var(--marque-pale); display: grid; place-items: center; margin-bottom: var(--e4); }
.bande-perdu { background: var(--perdu-pale); border-radius: var(--r-xl); padding: var(--e5); }
.bande-perdu h2, .bande-perdu h3 { color: var(--perdu-texte); }
.promesse { display: flex; gap: var(--e4); align-items: flex-start; }
.promesse .halo { flex: none; margin: 0; width: 52px; height: 52px; }
.pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--e3); border-radius: var(--r-rond); font-size: var(--t-petit); font-weight: 800; }

/* Écran de l'app en situation : un téléphone dessiné, jamais une carte. */
.telephone { width: min(280px, 72vw); aspect-ratio: 9 / 19; border: 10px solid #2b211b; border-radius: 40px; background: var(--fond); overflow: hidden; box-shadow: var(--ombre-flottante); margin-inline: auto; position: relative; }
.scene { position: relative; padding: var(--e5) 0; }
.scene::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--marque-pale); z-index: -1; }

/* Guides : lisibilité d'abord. */
.fil { font-size: var(--t-petit); color: var(--texte-doux); }
.fil a { color: var(--texte-doux); }
.article { max-width: var(--mesure); }
.article h2 { font-size: 1.75rem; margin-top: var(--e7); margin-bottom: var(--e3); }
.article p + p { margin-top: var(--e4); }
.en-bref { background: var(--carte); border-left: 6px solid var(--marque); border-radius: var(--r-md); padding: var(--e5); box-shadow: var(--ombre-douce); }
.en-bref ol { margin: var(--e3) 0 0; padding-left: 1.3em; }
.en-bref li + li { margin-top: var(--e2); }
.etapes { list-style: none; padding: 0; margin: var(--e5) 0 0; counter-reset: e; display: grid; gap: var(--e4); }
.etapes > li { counter-increment: e; display: grid; grid-template-columns: 44px 1fr; gap: var(--e4); }
.etapes > li::before { content: counter(e); width: 44px; height: 44px; border-radius: var(--r-rond); background: var(--marque-pale); color: var(--marque-texte); font-weight: 900; display: grid; place-items: center; }
.etapes h3 { margin-bottom: var(--e1); }
.etapes p { color: var(--texte-doux); }
.encadre-minou { background: var(--marque-pale); border-radius: var(--r-lg); padding: var(--e5); margin-top: var(--e5); }
.sommaire { border: 1px solid var(--bordure); border-radius: var(--r-md); padding: var(--e4) var(--e5); }
.sommaire ol { margin: var(--e2) 0 0; padding-left: 1.2em; }
.signature { font-size: var(--t-petit); color: var(--texte-doux); }
details { border-bottom: 1px solid var(--bordure); padding: var(--e4) 0; }
summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--e4); min-height: 44px; align-items: center; }
summary::after { content: "+"; color: var(--marque-texte); font-size: 1.5rem; font-weight: 800; }
details[open] summary::after { content: "−"; }
details p { color: var(--texte-doux); margin-top: var(--e2); }

/* Pied de page */
.pied { background: var(--texte); color: #F3EADF; padding-block: var(--e7); }
.pied a { color: #FFD6C8; }
.pied .grille { gap: var(--e5); }

/* ---- Ajouts de Minou 13 pour le site fabriqué (reprend les styles
   des maquettes accueil.html et guide.html de Minou 11). ---- */
body { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'dlig' 0; overflow-wrap: break-word; }
[hidden] { display: none !important; }
.logo img { width: 34px; height: 34px; }
.bandeau { background: var(--texte); color: #fff; font-size: var(--t-petit); font-weight: 700; padding: 6px 52px 6px 16px; text-align: center; position: relative; margin: 0; }
.bandeau a { color: #FFD6C8; display: inline-flex; min-height: 36px; align-items: center; }
.bandeau button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }
.nav a.nav-perdu { color: var(--perdu-texte); }
/* Accueil */
.hero { padding-block: var(--e7) var(--e8); }
.hero h1 { margin-top: var(--e3); }
.hero .chapeau { margin-top: var(--e4); }
.hero .badges { margin-top: var(--e5); }
.mention { font-size: var(--t-petit); color: var(--texte-doux); margin-top: var(--e3); }
.btn--perdu { border: 1.5px solid var(--perdu); color: var(--perdu-texte); background: #fff; }
.gestes { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .gestes { grid-template-columns: repeat(3, 1fr); } }
.geste h3 { margin-top: var(--e3); font-size: 1.5rem; }
.geste p { margin-top: var(--e2); color: var(--texte-doux); max-width: 44ch; }
.num { width: 44px; height: 44px; border-radius: 99px; background: var(--marque-pale); color: var(--marque-texte); font-weight: 900; display: grid; place-items: center; margin-top: var(--e4); }
.titre-section h2 { margin-top: var(--e2); }
.titre-section + * { margin-top: var(--e6); }
/* Écrans de l'app : images déjà cadrées par Design. */
.ecran { width: min(280px, 72vw); height: auto; margin-inline: auto; filter: drop-shadow(0 16px 24px rgba(61,44,30,.16)); }
.ecran--petit { width: min(220px, 60vw); }
.encadre-minou .ecran { width: 190px; }
.scene-img { border-radius: var(--r-xl); background: var(--marque-pale); width: 100%; height: auto; }
/* Guides */
.tete-guide { padding-block: var(--e6) var(--e5); }
.tete-guide h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); margin-top: var(--e3); max-width: 22ch; }
.tete-guide .chapeau { margin-top: var(--e4); max-width: 46ch; }
.tete-guide .signature { margin-top: var(--e4); }
.corps-guide { display: grid; gap: var(--e7); padding-bottom: var(--e8); }
@media (min-width: 1000px) { .corps-guide { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e8); align-items: start; } .aside { position: sticky; top: 88px; } }
.aside { display: grid; gap: var(--e4); }
.aside .carte a { display: block; padding-block: 6px; }
.article ul, .article ol:not(.etapes) { padding-left: 1.3em; margin: var(--e3) 0 0; }
.article li + li { margin-top: var(--e2); }
.article h3 { margin-top: var(--e5); }
.article .etapes h3 { margin-top: 0; }
.article > p, .article > ul, .article > div, .article > figure { margin-top: var(--e4); }
.en-bref h2 { margin: 0 !important; font-size: 1.25rem !important; }
.encadre-minou h3 { margin-top: var(--e2); }
.encadre-minou p { margin-top: var(--e3); }
.encadre-minou .badges { margin-top: var(--e4); }
.encadre-minou .badges img { height: 44px; }
.pont { margin-top: var(--e4); display: grid; gap: var(--e2); justify-items: start; }
.pont-bouton { display: inline-flex; align-items: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e5); border-radius: var(--r-lg); background: var(--fond); border: 2px dashed var(--marque); font-weight: 800; color: var(--texte); }
.bande-perdu .badges { margin-top: var(--e4); }
.bande-perdu p { margin-top: var(--e2); }
.sources { margin-top: var(--e7); font-size: var(--t-petit); color: var(--texte-doux); border-top: 1px solid var(--bordure); padding-top: var(--e4); }
.sources h2 { font-size: 1.1rem !important; margin: 0 0 var(--e2) !important; }
.sources ul { padding-left: 1.2em; }
.page-simple { padding-bottom: var(--e8); }
.page-simple .article { margin-top: var(--e5); }
.deux-cartes { display: grid; gap: var(--e4); }
@media (min-width: 700px) { .deux-cartes { grid-template-columns: 1fr 1fr; } }
.deux-cartes .carte ul { padding-left: 1.2em; margin-top: var(--e2); color: var(--texte-doux); }
/* Pied de page */
.pied nav { display: grid; gap: var(--e1); }
.pied nav a { min-height: 36px; display: inline-flex; align-items: center; }
.pied .nom { font-weight: 900; font-size: 1.25rem; color: #fff; }
.pied p { margin-top: var(--e2); }
.carte .h3, .h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.3; margin: 0 0 var(--e2); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.tableau { overflow-x: auto; margin-top: var(--e4); border-radius: var(--r-md); box-shadow: var(--ombre-douce); background: var(--carte); }
.tableau table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tableau th, .tableau td { text-align: left; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau th { font-weight: 800; background: var(--fond-alt); }
.tableau td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.tableau tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .tableau thead { display: none; } .tableau tr { display: block; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--bordure); } .tableau td { display: block; padding: 2px 0; border: 0; } }