/* =========================================
   VARIABLES — design tokens Mateda
   Source : piste « Le ciel de Mateda », issue du logo (04 - Maquettes/design-system/piste-logo-ciel-de-mateda.html), D-031.
   1. Palette et motifs du design system, sous leurs noms (--sky, --wheat, --stars…).
   2. Tokens du Master Template (--color-*, --space-*, --radius-*…) reliés à ces valeurs :
      les composants du socle n'utilisent que ceux-là.
   Contrastes (WCAG AA) : encre sur farine 13,3:1 · blanc sur ciel 5,9:1 · mie sur ciel 4,8:1 · blé sur nuit 6,9:1
   · ciel sur farine 5,5:1, sur mie 4,8:1 · miel sur farine 5,7:1 · texte secondaire sur farine 5,8:1, sur mie 5,0:1
   · nuit sur blé 6,9:1 (boutons blé) · contour des champs sur blanc 3,4:1.
   À ne jamais faire : petit texte en blé sur ciel (4:1), même en surtitre, titre de pied de page ou survol.
   Le blé sur ciel est réservé aux textes d'au moins 24 px (19 px en gras), aux étoiles et aux boutons ;
   les petits textes sur ciel sont en mie ou en blanc.
   ========================================= */

:root {
    /* ===== 1. Design system « Le ciel de Mateda » ===== */

    /* Couleurs prélevées dans le logo */
    --sky: #00716b;          /* fond du logo : en-tête, hero, boutons d'action */
    --night: #004a46;        /* ciel de nuit : survol, sections profondes */
    --wheat: #e8d3a0;        /* crème des silhouettes : grands titres, étoiles, boutons sur ciel */
    --crumb: #f3e7c6;        /* mie : texte courant sur ciel, fond de l'histoire */
    --flour: #faf8f2;        /* farine : fond clair */
    --ink: #12302e;          /* encre : texte sur clair */
    --muted: #4e6663;        /* texte secondaire sur clair */
    --honey-text: #7a5f25;   /* surtitres sur clair */
    --line: #e7e3d6;         /* filets sur clair */
    --input-line: #7d8f8c;   /* contour des champs */
    --white: #ffffff;
    --sky-tint: #e3f0ee;     /* halo de focus des champs */

    /* Transparences sur fond de ciel */
    --star-glow: rgba(232, 211, 160, 0.9);
    --wheat-line: rgba(232, 211, 160, 0.45);    /* filets et pointillés sur ciel */
    --wheat-soft: rgba(232, 211, 160, 0.25);    /* halo de la pastille du jour */
    --crumb-hover: rgba(243, 231, 198, 0.12);   /* survol des boutons à contour */
    --night-glass: rgba(0, 74, 70, 0.55);       /* pastille « Ouvert aujourd'hui » */

    /* États (toujours fond 100 + texte 700) */
    --success-700: #2f6b3f;
    --success-100: #e5f0e7;
    --error-700: #a8322a;
    --error-100: #f8e5e2;
    --warning-700: #8a5a00;
    --warning-100: #f8eed8;

    /* Trois voix : Gloock (titres), Quicksand (texte, boutons, prix), Great Vibes (accent manuscrit) */
    --font-title: 'Gloock', Georgia, 'Times New Roman', serif;
    --font-text: 'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
    --font-script: 'Great Vibes', 'Brush Script MT', cursive;

    /* Ciel étoilé : petites étoiles en dégradés radiaux, tuile répétée */
    --stars: radial-gradient(1.6px 1.6px at 8% 14%, var(--star-glow), transparent),
             radial-gradient(1.2px 1.2px at 23% 62%, var(--star-glow), transparent),
             radial-gradient(2px 2px at 37% 28%, var(--star-glow), transparent),
             radial-gradient(1.2px 1.2px at 52% 82%, var(--star-glow), transparent),
             radial-gradient(1.6px 1.6px at 66% 12%, var(--star-glow), transparent),
             radial-gradient(1.2px 1.2px at 74% 48%, var(--star-glow), transparent),
             radial-gradient(2px 2px at 88% 26%, var(--star-glow), transparent),
             radial-gradient(1.2px 1.2px at 93% 74%, var(--star-glow), transparent),
             radial-gradient(1.4px 1.4px at 15% 88%, var(--star-glow), transparent),
             radial-gradient(1px 1px at 45% 6%, var(--star-glow), transparent);
    --stars-size: 520px 360px;

    /* Médaillons : double anneau comme le cercle du logo (couleur du fond, puis filet) */
    --ring-photo: 0 0 0 10px var(--sky), 0 0 0 12px var(--wheat), 0 30px 60px rgba(0, 0, 0, 0.35);
    --ring-moon: 0 0 0 4px var(--sky), 0 0 0 5px var(--wheat), 0 14px 30px rgba(0, 0, 0, 0.35);
    --ring-product: 0 0 0 6px var(--flour), 0 0 0 7px var(--sky), 0 16px 30px rgba(18, 48, 46, 0.18);
    --ring-story: 0 0 0 10px var(--crumb), 0 0 0 11px var(--sky), 0 24px 50px rgba(18, 48, 46, 0.25);
    --ring-thumb: 0 0 0 3px var(--white), 0 0 0 4px var(--sky);   /* vignettes de Ma commande */
    --ring-tile: 0 0 0 4px var(--flour), 0 0 0 5px var(--sky), 0 12px 24px rgba(18, 48, 46, 0.14);   /* photos de la galerie */
    --ring-button-sky: 0 0 0 3px var(--flour), 0 0 0 4px var(--sky);
    --ring-button-wheat: 0 0 0 3px var(--sky), 0 0 0 4px var(--wheat);
    --ring-ghost: inset 0 0 0 1.5px var(--crumb);
    --ring-today: inset 0 0 0 1px var(--wheat-line);
    --today-glow: 0 0 0 4px var(--wheat-soft);   /* point du jour allumé */
    --today-off: inset 0 0 0 2px var(--wheat);   /* point du jour éteint (fermé) */
    --glow-star: drop-shadow(0 0 10px var(--wheat-line));

    /* Tailles des motifs */
    --medallion-size: 440px;
    --medallion-page: 360px;         /* médaillon des en-têtes de page */
    --chapter-photo: 26rem;          /* photo ronde des chapitres de Notre histoire */
    --team-photo: 13rem;
    --moon-lg: 120px;
    --moon-sm: 96px;
    --story-logo-size: 22rem;
    --brand-size: 60px;
    /* Logo dans un rond : « Mateda » touche les coins du carré, le dessin tient dans un cercle centré 9 % plus bas */
    --logo-round-scale: 0.86;
    --logo-round-shift: -7.7%;
    --footer-logo-size: 104px;
    --horizon-height: 90px;          /* bas du hero arrondi en horizon */
    --horizon-height-page: 54px;     /* même horizon, plus discret, sous les en-têtes de page */
    --spark-lg: 1.6rem;
    --spark-md: 1.1rem;
    --spark-sm: 0.75rem;
    --constellation-star: 2.6rem;
    --constellation-min: 9rem;       /* largeur minimale d'une étape */
    --constellation-step: 36px;      /* décalage d'une étoile sur deux */
    --today-dot: 9px;
    --add-size: 2.75rem;             /* bouton rond « + » (cible tactile 44 px) */
    --underline-offset: 0.3em;

    /* Tailles de titres de la maquette */
    --display-hero: clamp(2.7rem, 5.4vw, 4.4rem);
    --display-section: clamp(2.2rem, 3.6vw, 3rem);
    --display-story: clamp(2.1rem, 3.4vw, 2.9rem);
    --script-section: clamp(2.1rem, 3vw, 2.6rem);
    --quote-size: clamp(2.6rem, 5.5vw, 4.4rem);   /* devise manuscrite */

    --weight-heading: 400;   /* Gloock n'existe qu'en une graisse */
    --weight-display: 400;
    --tracking-display: 0;
    --tracking-heading: 0;
    --tracking-button: 0.02em;
    --tracking-eyebrow: 0.22em;
    --tracking-title: 0;

    /* Les composants du socle prévoient une largeur de police : Quicksand n'en a qu'une */
    --stretch-display: normal;
    --stretch-heading: normal;
    --stretch-label: normal;
    --stretch-body: normal;

    /* Espacements (base 4 px) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 5.5rem;

    /* Rayons : tout est rond ou doux, comme le cercle du logo */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-full: 999px;
    --radius-button: var(--radius-full);
    --radius-card: var(--radius-lg);
    --radius-input: 10px;
    --radius-media: var(--radius-lg);

    /* Ombres douces, teintées d'encre */
    --shadow-sm: 0 1px 0 rgba(18, 48, 46, 0.08), 0 6px 16px rgba(18, 48, 46, 0.06);
    --shadow-md: 0 10px 30px rgba(18, 48, 46, 0.12);
    --shadow-lg: 0 24px 50px rgba(18, 48, 46, 0.18);

    /* Bordures et focus */
    --border-width: 1px;
    --border-width-strong: 2px;
    --border-width-notice: 4px;
    --focus-ring: 3px solid var(--sky);
    --focus-ring-on-dark: 3px solid var(--wheat);
    --focus-offset: 3px;
    --focus-halo: 0 0 0 3px var(--sky-tint);

    /* Animations */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --lift: 0px;

    /* Animations légères (D-034) : apparition au défilement, étoiles qui scintillent, médaillons qui flottent */
    --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-loop: ease-in-out;   /* scintillement et flottement, en boucle */
    --reveal-duration: 700ms;
    --reveal-shift: 18px;
    --twinkle-duration: 4s;
    --twinkle-dim: 0.45;
    --twinkle-scale: 0.8;
    --float-duration: 7s;
    --float-shift: -8px;
    --pop-duration: 350ms;
    --pop-scale: 1.18;

    /* Mise en page */
    --container-max: 1200px;
    --container-narrow: 720px;
    --text-max: 65ch;
    --text-max-hero: 42ch;      /* texte d'introduction du hero */
    --text-max-cta: 46ch;       /* texte de l'appel à l'action */
    --page-gutter: 1.25rem;
    --header-height: 5.25rem;
    --nav-max-height: calc(100dvh - var(--header-height));   /* menu mobile ouvert : défile s'il dépasse l'écran */
    --button-min-height: 3.1rem;
    --button-padding: 0 1.7rem;
    --button-padding-large: 0 1.9rem;
    --button-padding-small: 0 1.1rem;
    --input-padding: 0.7rem 0.95rem;
    --textarea-min-height: 8rem;
    --column-min-sm: 12rem;
    --column-min-md: 14rem;
    --column-min-lg: 18rem;
    --hover-zoom: 1.03;
    --card-image-ratio: 1 / 1;
    --media-image-ratio: 4 / 3;
    --gallery-image-ratio: 1 / 1;
    --map-ratio: 1 / 1;
    --team-photo-ratio: 1 / 1;
    --cover-height: clamp(14rem, 35vw, 26rem);
    --thumb-size: 4.5rem;
    --quantity-size: 2.5rem;
    --summary-width: 22rem;
    --toggle-size: 2.75rem;
    --toggle-bar-width: 1.5rem;
    --toggle-bar-height: 2px;
    --toggle-bar-gap: 0.4rem;

    /* ===== 2. Tokens du Master Template ===== */

    /* Palette */
    --color-primary: var(--sky);
    --color-primary-dark: var(--night);
    --color-primary-light: var(--sky-tint);
    --color-secondary: var(--wheat);
    --color-ink: var(--ink);
    --color-ink-muted: var(--muted);
    --color-paper: var(--flour);
    --color-paper-alt: var(--crumb);
    --color-line: var(--line);
    --color-white: var(--white);
    --color-success: var(--success-700);
    --color-success-light: var(--success-100);
    --color-error: var(--error-700);
    --color-error-light: var(--error-100);

    /* Rôles */
    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-background: var(--flour);
    --color-background-alt: var(--crumb);
    --color-border: var(--line);
    --color-border-input: var(--input-line);
    --color-link: var(--sky);
    --color-link-hover: var(--night);
    --color-action: var(--sky);
    --color-action-hover: var(--night);
    --color-on-action: var(--white);
    --color-accent: var(--honey-text);
    --color-focus: var(--sky);
    --color-header-background: var(--sky);
    --color-header-text: var(--crumb);
    --color-footer-background: var(--sky);
    --color-footer-text: var(--crumb);
    --color-on-dark-muted: var(--crumb);
    --color-on-dark-accent: var(--wheat);
    --color-card: var(--white);

    /* Polices */
    --font-heading: var(--font-title);
    --font-body: var(--font-text);

    /* Tailles de texte */
    --text-xs: 0.78rem;     /* 12,5 */
    --text-sm: 0.92rem;     /* 14,7 */
    --text-base: 1.0625rem; /* 17 */
    --text-lg: 1.15rem;     /* 18,4 */
    --text-xl: 1.45rem;     /* 23 */
    --text-2xl: 1.75rem;    /* 28 */
    --text-3xl: 2.4rem;     /* 38 */
    --text-4xl: 3rem;       /* 48 */
    --text-5xl: 4.4rem;     /* 70 */
    --text-h3: var(--text-xl);
    --text-h2: var(--display-section);
    --text-h1: var(--display-hero);

    --leading-display: 1.02;
    --leading-heading: 1.08;
    --leading-tight: 1.15;
    --leading-base: 1.65;
    --weight-regular: 500;   /* Quicksand se lit mieux à 500 */
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Superpositions (z-index) des composants Mateda */
    --z-raised: 1;      /* contenu au-dessus du décor (horizon, étincelles) */
    --z-overlay: 2;     /* lien étendu d'une carte produit */
    --z-sticky: 10;     /* barre des catégories de La carte */

    /* Breakpoints (informatif) : 1100px = carte du ciel de La carte · 900px = tablette · 640px = mobile */
}

/* Gouttière de la maquette à partir de la tablette */
@media (min-width: 900px) {
    :root {
        --page-gutter: 3.5rem;
    }
}

/* Motifs resserrés sur mobile (maquette 390 px) */
@media (max-width: 640px) {
    :root {
        --header-height: 4.25rem;
        --medallion-size: 270px;
        --medallion-page: 240px;
        --chapter-photo: 16rem;
        --team-photo: 10rem;
        --moon-lg: 82px;
        --moon-sm: 66px;
        --story-logo-size: 15rem;
        --brand-size: 46px;
        --horizon-height: 60px;
        --horizon-height-page: 36px;
        --ring-photo: 0 0 0 7px var(--sky), 0 0 0 9px var(--wheat), 0 20px 40px rgba(0, 0, 0, 0.35);
    }
}