/* ============================================================================= MIICEY — Page vitrine de pré-lancement Charte : Brand Book V3 (30/07/2026) + Guide charte thème Shopify (09/07/2026) Mobile first. Aucun framework, aucune dépendance externe. ========================================================================== */ /* ----------------------------------------------------------------------------- 0. POLICES — auto-hébergées (SIL Open Font License, cf. assets/fonts/OFL-*.txt) Pour repasser sur Google Fonts, voir README.md § « Polices ». -------------------------------------------------------------------------- */ @font-face{ font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/Fredoka-SemiBold.woff2') format('woff2'); } @font-face{ font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/Fredoka-Bold.woff2') format('woff2'); } @font-face{ font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/Nunito-Regular.woff2') format('woff2'); } @font-face{ font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/Nunito-SemiBold.woff2') format('woff2'); } @font-face{ font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/Nunito-Bold.woff2') format('woff2'); } /* ----------------------------------------------------------------------------- 1. JETONS DE DESIGN -------------------------------------------------------------------------- */ :root{ /* Palette officielle */ --creme:#FBF6EF; --blanc-casse:#FFFDF8; --peche:#FBCEA2; --peche-clair:#F0DCC8; --marron:#663419; --encre:#2B1D14; --dore:#D98F2B; /* Dérivés (usage interne : fonds doux, séparateurs) */ --peche-voile:#FDEBD8; --marron-fonce:#4E2712; --encre-douce:#5B4636; /* Typo */ --font-titre:'Fredoka','Trebuchet MS','Segoe UI',system-ui,sans-serif; --font-texte:'Nunito','Verdana','Trebuchet MS',system-ui,sans-serif; /* Rayons — formes généreuses et arrondies */ --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px; /* Espacements */ --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem; --section-y:clamp(3.5rem,9vw,6.5rem); --wrap:1200px; --wrap-narrow:760px; /* Ombres douces, jamais dures */ --shadow-sm:0 2px 8px rgba(102,52,25,.06); --shadow-md:0 10px 30px rgba(102,52,25,.09); --shadow-lg:0 18px 48px rgba(102,52,25,.12); --ease:cubic-bezier(.22,.61,.36,1); --header-h:68px; } /* ----------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* `hidden` doit toujours l'emporter sur les display:flex / inline-flex des composants — c'est ce qui masque réellement les liens non configurés. */ [hidden]{display:none!important} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); } body{ margin:0; background:var(--creme); color:var(--encre); font-family:var(--font-texte); font-size:1.0625rem; /* 17px — confort de lecture mobile */ font-weight:400; line-height:1.65; letter-spacing:.005em; -webkit-font-smoothing:antialiased; /* Filet de sécurité contre tout débordement horizontal. `clip` plutôt que `hidden` : `hidden` ferait du un conteneur de défilement, ce qui casse le verrouillage du scroll à l'ouverture du menu. */ overflow-x:clip; } @supports not (overflow-x:clip){ body{overflow-x:hidden} } img,picture,svg{max-width:100%} img{height:auto;display:block} h1,h2,h3{ font-family:var(--font-titre); font-weight:700; color:var(--marron); line-height:1.15; letter-spacing:-.01em; margin:0 0 var(--space-4); text-wrap:balance; } p{margin:0 0 var(--space-4)} p:last-child{margin-bottom:0} a{color:var(--marron);text-decoration-thickness:1.5px;text-underline-offset:3px} a:hover{color:var(--marron-fonce)} ul{margin:0;padding:0;list-style:none} sup{font-size:.7em;line-height:0} /* Focus visible partout — jamais supprimé */ :focus-visible{ outline:3px solid var(--dore); outline-offset:3px; border-radius:6px; } .skip-link{ position:absolute;left:var(--space-4);top:-100px;z-index:1000; background:var(--marron);color:var(--creme); padding:.75rem 1.25rem;border-radius:var(--r-pill); font-family:var(--font-texte);font-weight:700;text-decoration:none; transition:top .2s var(--ease); } .skip-link:focus{top:var(--space-4);color:var(--creme)} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .sprite{position:absolute;width:0;height:0;overflow:hidden} /* ----------------------------------------------------------------------------- 3. STRUCTURE -------------------------------------------------------------------------- */ .wrap{ width:100%;max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); } .wrap--narrow{max-width:var(--wrap-narrow)} .section{padding-block:var(--section-y)} .section__head{max-width:44rem;margin:0 auto clamp(2.5rem,5vw,3.5rem);text-align:center} .section__title{font-size:clamp(1.65rem,4.4vw,2.6rem)} .section__title--center{text-align:center;max-width:26ch;margin-inline:auto} .section__intro{font-size:1.0625rem;color:var(--encre-douce);max-width:58ch;margin-inline:auto} .section__intro--center{text-align:center} .surtitle{ font-family:var(--font-titre); font-weight:600; font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--marron); margin:0 0 var(--space-3); display:flex;align-items:center;gap:.6rem; } .section__head .surtitle, .section__title--center + .section__intro--center, .newsletter .surtitle{justify-content:center} .surtitle::before{ content:'';width:18px;height:3px;border-radius:2px; background:var(--dore);flex:none; } .prose p{color:var(--encre-douce)} .section__foot{text-align:center;margin-top:clamp(2.5rem,5vw,3.5rem)} .section__foot-text{ font-family:var(--font-titre);font-weight:600; font-size:clamp(1.05rem,2.5vw,1.3rem); color:var(--marron);margin-bottom:var(--space-6); } /* ----------------------------------------------------------------------------- 4. BOUTONS -------------------------------------------------------------------------- */ .btn{ --btn-bg:var(--marron); --btn-fg:var(--creme); --btn-bd:var(--marron); display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:52px; /* > 44 px : confort tactile */ padding:.85rem 1.6rem; background:var(--btn-bg);color:var(--btn-fg); border:2px solid var(--btn-bd);border-radius:var(--r-pill); font-family:var(--font-texte);font-weight:700;font-size:1rem; line-height:1.2;text-align:center;text-decoration:none;cursor:pointer; transition:background-color .2s var(--ease),color .2s var(--ease), border-color .2s var(--ease),transform .2s var(--ease), box-shadow .2s var(--ease); } .btn:hover{ color:var(--btn-fg); transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn:active{transform:translateY(0)} .btn--primary:hover{--btn-bg:var(--encre);--btn-bd:var(--encre)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--marron);--btn-bd:var(--marron)} /* Survol doré : texte encre (contraste 6,1:1 — WCAG AA) */ .btn--ghost:hover{--btn-bg:var(--dore);--btn-fg:var(--encre);--btn-bd:var(--dore)} .btn--sm{min-height:46px;padding:.6rem 1.2rem;font-size:.9375rem} .btn--block{width:100%} .btn__ext{width:16px;height:16px;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)} .btn-row .btn{flex:1 1 auto;min-width:min(100%,15rem)} /* ----------------------------------------------------------------------------- 5. BANDEAU DE PRÉ-LANCEMENT -------------------------------------------------------------------------- */ .prelaunch{background:var(--marron);color:var(--creme);font-size:.9375rem} .prelaunch__inner{ max-width:var(--wrap);margin-inline:auto; padding:.6rem clamp(1.25rem,5vw,2.5rem); display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.35rem 1rem;text-align:center; } .prelaunch__text{margin:0;font-weight:600;display:flex;align-items:center;gap:.55rem} .prelaunch__dots{display:inline-flex;gap:4px;flex:none} .prelaunch__dots i{ width:7px;height:7px;border-radius:50%;background:var(--peche); animation:pulse 2.4s var(--ease) infinite; } .prelaunch__dots i:last-child{background:var(--dore);animation-delay:.4s} @keyframes pulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1)}} .prelaunch__link{ color:var(--peche);font-weight:700;text-decoration:underline; display:inline-flex;align-items:center;gap:.35rem; min-height:44px;padding:.35rem .35rem;border-radius:8px; } .prelaunch__link:hover{color:var(--creme)} .prelaunch__link svg{width:16px;height:16px;transition:transform .2s var(--ease)} .prelaunch__link:hover svg{transform:translateX(3px)} /* ----------------------------------------------------------------------------- 6. HEADER + NAVIGATION -------------------------------------------------------------------------- */ /* Fond opaque volontaire : ni `backdrop-filter` ni `filter` ici — ces propriétés créeraient un bloc conteneur pour le menu mobile en position:fixed, qui se retrouverait ancré au header au lieu du viewport (et déborderait en haut de page). */ .site-header{ position:sticky;top:0;z-index:100; background:var(--creme); border-bottom:1px solid transparent; transition:border-color .25s var(--ease),box-shadow .25s var(--ease); } .site-header.is-stuck{border-bottom-color:var(--peche-clair);box-shadow:var(--shadow-sm)} .site-header__inner{ max-width:var(--wrap);margin-inline:auto; padding:.7rem clamp(1.25rem,5vw,2.5rem); min-height:var(--header-h); display:flex;align-items:center;justify-content:space-between;gap:var(--space-4); } .site-header__logo{ display:flex;align-items:center;flex:none; min-height:44px;padding-inline:2px;border-radius:8px; } .site-header__logo img{height:32px;width:auto} .nav__list{display:flex;gap:var(--space-6)} .nav__link{ font-weight:600;text-decoration:none;color:var(--marron); padding:.4rem 0;position:relative;display:inline-block; } .nav__link::after{ content:'';position:absolute;left:0;right:0;bottom:-2px;height:2.5px; border-radius:2px;background:var(--dore); transform:scaleX(0);transform-origin:left; transition:transform .22s var(--ease); } .nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)} .burger{ display:none; align-items:center;gap:.45rem; min-height:46px;padding:.5rem .9rem; background:transparent;color:var(--marron); border:2px solid var(--marron);border-radius:var(--r-pill); font-family:var(--font-texte);font-weight:700;font-size:.9375rem;cursor:pointer; } .burger svg{width:22px;height:22px} .burger__close{display:none} /* --- Desktop --- */ @media (min-width:961px){ .nav{display:flex;align-items:center;gap:var(--space-8)} } /* --- Mobile / tablette --- */ @media (max-width:960px){ .burger{display:inline-flex} /* Le panneau se déploie SOUS la barre du header, qui reste toujours visible. --nav-offset = bas réel du header, recalculé en JS (le bandeau de pré-lancement disparaît au défilement, la hauteur varie donc). */ .nav{ position:fixed;left:0;right:0; top:var(--nav-offset,var(--header-h)); padding:1.5rem clamp(1.25rem,5vw,2.5rem) 2.5rem; background:var(--blanc-casse); border-radius:0 0 var(--r-xl) var(--r-xl); box-shadow:var(--shadow-lg); display:flex;flex-direction:column;gap:var(--space-6); /* Escamoté au-dessus de l'écran, décalage du header compris */ transform:translateY(calc(-100% - var(--nav-offset,var(--header-h)) - 16px)); transition:transform .3s var(--ease); z-index:1; max-height:calc(100dvh - var(--nav-offset,var(--header-h))); overflow-y:auto; } .nav.is-open{transform:translateY(0)} .nav__list{flex-direction:column;gap:0} .nav__list li + li{border-top:1px solid var(--peche-clair)} .nav__link{ display:block;padding:.95rem 0; font-family:var(--font-titre);font-weight:600;font-size:1.25rem; } .nav__link::after{display:none} .nav__cta{width:100%} .site-header.is-open .burger__open{display:none} .site-header.is-open .burger__close{display:block} .nav-overlay{ position:fixed;inset:0;z-index:98; background:rgba(43,29,20,.45); opacity:0;transition:opacity .3s var(--ease); } .nav-overlay.is-visible{opacity:1} } /* ----------------------------------------------------------------------------- 7. HERO -------------------------------------------------------------------------- */ .hero{ position:relative; padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem); background: radial-gradient(120% 90% at 85% 0%,var(--peche-voile) 0%,transparent 62%), var(--creme); } .hero__grid{display:grid;gap:clamp(2rem,5vw,3.5rem)} .hero__title{ font-size:clamp(2rem,6.2vw,3.35rem); margin-bottom:var(--space-6); max-width:18ch; } .hero__text{font-size:clamp(1.0625rem,2.2vw,1.15rem);color:var(--encre-douce);max-width:52ch} .hero__figure{margin:0;order:-1} .hero__figure img{ width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); aspect-ratio:16/9;object-fit:cover; } .reassurance{ display:flex;flex-wrap:wrap;gap:.6rem; margin-top:var(--space-8); } .reassurance li{ display:inline-flex;align-items:center;gap:.55rem; padding:.5rem .95rem .5rem .55rem; background:var(--blanc-casse); border:1.5px solid var(--peche-clair); border-radius:var(--r-pill); font-size:.9375rem;font-weight:600;color:var(--marron); box-shadow:var(--shadow-sm); } .reassurance img,.reassurance__svg{width:26px;height:26px;flex:none} .reassurance__svg{color:var(--marron);fill:none;stroke:currentColor} @media (min-width:861px){ .hero__grid{grid-template-columns:1.02fr .98fr;align-items:center} .hero__figure{order:0} } /* ----------------------------------------------------------------------------- 8. RAISON D’ÊTRE -------------------------------------------------------------------------- */ .section--marque{background:var(--blanc-casse)} .section--marque .section__title{max-width:20ch} .pullquote{ margin:clamp(2.25rem,4vw,3rem) 0 0; padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.5rem,4vw,2.75rem); background:var(--peche); border-radius:var(--r-lg); position:relative;overflow:hidden; } .pullquote::before{ content:'';position:absolute;right:-40px;top:-40px; width:150px;height:150px;border-radius:50%; background:rgba(255,253,248,.4); } .pullquote p{ position:relative; font-family:var(--font-titre);font-weight:600; font-size:clamp(1.15rem,3vw,1.55rem); line-height:1.35;color:var(--marron);margin:0; } /* ----------------------------------------------------------------------------- 9. CARTES (grilles génériques) -------------------------------------------------------------------------- */ .cards{display:grid;gap:var(--space-4)} @media (min-width:620px){.cards--4{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}} @media (min-width:1000px){.cards--4{grid-template-columns:repeat(4,1fr)}} .card{ background:var(--blanc-casse); border:1.5px solid var(--peche-clair); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,1.9rem); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .card__title{font-size:1.15rem;margin-bottom:.6rem} .card p{color:var(--encre-douce);font-size:.9688rem;margin:0} .card__picto{width:52px;height:52px;margin-bottom:var(--space-4)} .card__picto--svg{color:var(--marron);fill:none;stroke:currentColor;stroke-width:1.6} /* ----------------------------------------------------------------------------- 10. RECETTES -------------------------------------------------------------------------- */ .section--recettes{ background: radial-gradient(90% 60% at 10% 100%,var(--peche-voile) 0%,transparent 60%), var(--creme); } .cards--recettes{gap:var(--space-6)} @media (min-width:760px){.cards--recettes{grid-template-columns:repeat(2,1fr)}} .recette{ display:flex;flex-direction:column; background:var(--blanc-casse); border:1.5px solid var(--peche-clair); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease); } .recette:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .recette__media{ position:relative; background:var(--peche-voile); border-bottom:4px solid var(--accent,var(--marron)); } .recette__media img{width:100%;aspect-ratio:1;object-fit:cover} .recette__body{padding:clamp(1.4rem,3vw,1.9rem);display:flex;flex-direction:column;flex:1} .recette__name{ font-size:clamp(1.2rem,2.6vw,1.4rem); margin-bottom:.35rem; } /* --accent = couleur de gamme vive (filet décoratif sous le packshot). --accent-ink = même teinte assombrie pour le texte, afin de rester au-dessus du seuil WCAG AA de 4,5:1 sur fond blanc cassé. */ .recette__hook{ font-family:var(--font-titre);font-weight:600;font-size:1rem; color:var(--accent-ink,var(--marron)); margin-bottom:var(--space-4); } .recette__text{color:var(--encre-douce);font-size:.9688rem} /* Poussé en bas de carte : les 4 profils s'alignent quelle que soit la longueur du texte au-dessus. */ .recette__profil{ margin-top:auto; padding-top:var(--space-6); margin-bottom:0; font-weight:600;font-size:.9375rem;color:var(--marron); border-top:1px solid var(--peche-clair); } /* ----------------------------------------------------------------------------- 11. RÔLE DES INGRÉDIENTS -------------------------------------------------------------------------- */ .section--ingredients{background:var(--blanc-casse)} .ingredients__grid{display:grid;gap:clamp(2rem,5vw,3rem)} .ingredients__figure{margin:0} .ingredients__figure img{ width:100%;border-radius:var(--r-lg); aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-md); } .roles{display:grid;gap:var(--space-4)} .role{ display:flex;align-items:center;gap:var(--space-4); background:var(--creme); border:1.5px solid var(--peche-clair); border-radius:var(--r-md); padding:1rem 1.25rem; } .role__icon{ width:38px;height:38px;flex:none; color:var(--marron);fill:none;stroke:currentColor; } .role__name{ font-size:1.0625rem;margin:0 0 .1rem; } .role__effect{ margin:0;font-size:.9375rem;color:var(--encre-douce); } @media (min-width:620px){ .roles{grid-template-columns:repeat(2,1fr);gap:var(--space-6)} } @media (min-width:860px){ .ingredients__grid{grid-template-columns:1.05fr .95fr;align-items:center} .ingredients__intro{grid-column:1;grid-row:1} .ingredients__figure{grid-column:2;grid-row:1} .roles{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(4,1fr)} .role{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1.4rem 1.35rem} } /* ----------------------------------------------------------------------------- 12. FONDATEURS -------------------------------------------------------------------------- */ .section--fondateurs{ background: radial-gradient(80% 70% at 90% 10%,var(--peche-voile) 0%,transparent 60%), var(--creme); } .fondateurs__grid{display:grid;gap:clamp(2rem,5vw,3.5rem)} .fondateurs__figure{margin:0} .fondateurs__figure img{ width:100%;border-radius:var(--r-xl); aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-lg); } /* Variante image détourée : ni cadre, ni ombre, ni recadrage — le sujet se pose directement sur le fond de la section. */ .fondateurs__figure--detoure img{ border-radius:0;box-shadow:none; aspect-ratio:auto;object-fit:contain; } .signature{ font-family:var(--font-titre);font-weight:600; font-size:1.0625rem;color:var(--marron); margin:var(--space-6) 0; } .fondateurs__content .btn{margin-top:0} @media (min-width:860px){ .fondateurs__grid{grid-template-columns:1.05fr .95fr;align-items:center} } /* ----------------------------------------------------------------------------- 13. MOMENTS -------------------------------------------------------------------------- */ .section--moments{background:var(--blanc-casse)} /* Deux usages illustrés : grille resserrée et centrée plutôt qu'étirée sur toute la largeur. */ .moments{max-width:760px;margin-inline:auto} @media (min-width:620px){.moments{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}} .moment{display:flex;flex-direction:column;gap:var(--space-4)} .moment__media{ border-radius:var(--r-lg);overflow:hidden; background:var(--peche-voile); aspect-ratio:1; box-shadow:var(--shadow-sm); } .moment__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)} .moment:hover .moment__media img{transform:scale(1.04)} .moment__title{ display:flex;align-items:center;gap:.6rem; font-size:1.0625rem;margin:0; } .moment__title svg{ width:26px;height:26px;flex:none; color:var(--marron);fill:none;stroke:currentColor; } /* ----------------------------------------------------------------------------- 14. POINTS DE VENTE -------------------------------------------------------------------------- */ .section--pdv{ background: radial-gradient(85% 65% at 5% 5%,var(--peche-voile) 0%,transparent 58%), var(--creme); } .pdv-grid{display:grid;gap:var(--space-4)} @media (min-width:700px){.pdv-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}} @media (min-width:1000px){.pdv-grid{grid-template-columns:repeat(3,1fr)}} .pdv{ background:var(--blanc-casse); border:1.5px solid var(--peche-clair); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2rem); box-shadow:var(--shadow-sm); } .pdv__title{ display:flex;align-items:center;gap:.6rem; font-size:1.15rem; padding-bottom:var(--space-4);margin-bottom:var(--space-4); border-bottom:2px solid var(--peche); } .pdv__title svg{width:26px;height:26px;flex:none;color:var(--marron);fill:none;stroke:currentColor} .pdv__list{display:flex;flex-direction:column;gap:.55rem} .pdv__list li{ display:flex;flex-direction:column; padding-left:1.4rem;position:relative; font-size:.9688rem;color:var(--encre-douce); } .pdv__list li::before{ content:'';position:absolute;left:0;top:.62em; width:8px;height:8px;border-radius:50%;background:var(--dore); } .pdv__list strong{color:var(--encre);font-weight:700} .pdv__list span{font-size:.875rem} .pdv--online{ background:var(--peche); border-color:var(--peche); } .pdv--online .pdv__title{border-bottom-color:rgba(102,52,25,.25)} .pdv__text{color:var(--marron);margin-bottom:var(--space-6);font-size:.9688rem} .microcopy{ margin-top:var(--space-8);text-align:center; font-size:.875rem;color:var(--encre-douce); max-width:60ch;margin-inline:auto; } /* ----------------------------------------------------------------------------- 15. FORMULAIRE -------------------------------------------------------------------------- */ .section--newsletter{background:var(--peche-voile)} .newsletter{text-align:center} .form{ max-width:34rem;margin:clamp(2rem,4vw,2.75rem) auto 0; text-align:left; background:var(--blanc-casse); border:1.5px solid var(--peche-clair); border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2.25rem); box-shadow:var(--shadow-md); } .form__row{margin-bottom:var(--space-4)} .form__label{ display:block;margin-bottom:.45rem; font-weight:700;font-size:.9375rem;color:var(--marron); } .form__input{ width:100%;min-height:54px; padding:.85rem 1.1rem; background:var(--creme); color:var(--encre); border:2px solid var(--marron); border-radius:var(--r-md); font-family:var(--font-texte);font-size:1rem; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .form__input::placeholder{color:#8A7663} .form__input:focus{outline:none;border-color:var(--dore);box-shadow:0 0 0 4px rgba(217,143,43,.28)} .form__input:focus-visible{outline:none} .form__input[aria-invalid="true"]{border-color:#A32C15;box-shadow:0 0 0 4px rgba(163,44,21,.16)} .form__error{ margin:.55rem 0 0;font-size:.875rem;font-weight:600;color:#A32C15; display:flex;align-items:flex-start;gap:.4rem; } .form__error::before{content:'!';flex:none; width:18px;height:18px;border-radius:50%;background:#A32C15;color:#fff; font-size:.75rem;line-height:18px;text-align:center;font-weight:700;margin-top:.1rem} /* Honeypot : hors écran, jamais focusable au clavier via tabindex=-1 */ .form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form__legal{ margin:var(--space-4) 0 0; font-size:.8125rem;line-height:1.5;color:var(--encre-douce); } .form__status{margin:var(--space-4) 0 0;font-size:.875rem;font-weight:600;color:#A32C15} .form__status:empty{margin:0} /* Bouton en cours d’envoi */ .btn__spinner{display:none;width:18px;height:18px;flex:none} .btn.is-loading{cursor:progress;opacity:.85} .btn.is-loading .btn__spinner{ display:block; border:2.5px solid rgba(251,246,239,.4); border-top-color:var(--creme); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .form__success{ max-width:34rem;margin:clamp(2rem,4vw,2.75rem) auto 0; display:flex;align-items:center;gap:var(--space-4); background:var(--marron);color:var(--creme); border-radius:var(--r-lg); padding:clamp(1.5rem,3.5vw,2rem); text-align:left; box-shadow:var(--shadow-md); } .form__success p{margin:0;font-family:var(--font-titre);font-weight:600;font-size:1.0625rem;line-height:1.35} .form__success-icon{ width:36px;height:36px;flex:none; color:var(--peche);fill:none;stroke:currentColor; } /* ----------------------------------------------------------------------------- 16. FOOTER -------------------------------------------------------------------------- */ .site-footer{ background:var(--marron);color:var(--peche-voile); padding-block:clamp(3rem,6vw,4.5rem) var(--space-8); font-size:.9375rem; } .site-footer__inner{display:grid;gap:clamp(2rem,5vw,3rem)} .site-footer__brand img{height:34px;width:auto} .site-footer__signature{ margin:var(--space-4) 0 0; font-family:var(--font-titre);font-weight:600; font-size:1.0625rem;color:var(--peche);max-width:22ch; } .site-footer__nav{display:grid;gap:var(--space-8)} @media (min-width:560px){.site-footer__nav{grid-template-columns:repeat(3,1fr)}} @media (min-width:900px){.site-footer__inner{grid-template-columns:.9fr 2.1fr}} .site-footer__heading{ font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase; color:var(--peche);margin-bottom:var(--space-4);font-weight:600; } .site-footer__col ul{display:flex;flex-direction:column;gap:.15rem} .site-footer__col a{ color:var(--peche-voile);text-decoration:none; display:inline-flex;align-items:center;gap:.5rem; min-height:44px;padding:.35rem .3rem;margin-left:-.3rem;border-radius:8px; } .site-footer__col a:hover{color:#fff;text-decoration:underline} .site-footer__col a svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor} .site-footer__soon{ margin:0;font-size:.8125rem;color:rgba(253,235,216,.72);font-style:italic; } .site-footer__col a:focus-visible,.prelaunch__link:focus-visible{outline-color:var(--peche)} .site-footer__bottom{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:var(--space-6); border-top:1px solid rgba(251,206,162,.25); display:flex;flex-wrap:wrap;gap:.5rem 1.5rem; justify-content:space-between;align-items:center; font-size:.875rem;color:rgba(253,235,216,.8); } .site-footer__bottom p{margin:0} /* ----------------------------------------------------------------------------- 17. BOUTON FIXE MOBILE -------------------------------------------------------------------------- */ .sticky-cta{ position:fixed;z-index:90; left:max(1rem,env(safe-area-inset-left)); right:max(1rem,env(safe-area-inset-right)); bottom:calc(.85rem + env(safe-area-inset-bottom)); display:none;align-items:center;justify-content:center; min-height:52px;padding:.85rem 1.4rem; background:var(--marron);color:var(--creme); border-radius:var(--r-pill); font-weight:700;font-size:1rem;text-decoration:none;text-align:center; box-shadow:0 8px 24px rgba(43,29,20,.28); opacity:0;transform:translateY(120%); transition:opacity .3s var(--ease),transform .3s var(--ease); } .sticky-cta:hover{color:var(--creme)} @media (max-width:960px){ .sticky-cta{display:flex} .sticky-cta.is-visible{opacity:1;transform:translateY(0)} body:has(.sticky-cta.is-visible) .site-footer__bottom{padding-bottom:3.5rem} /* Menu ouvert : on efface le bouton fixe pour ne pas doubler les appels à l'action. Le défilement n'est volontairement PAS bloqué : le panneau est ancré au header collant et le suit, et tout verrouillage par `overflow:hidden` décalerait la position de défilement de l'utilisateur. */ html.nav-open .sticky-cta{opacity:0;transform:translateY(120%);pointer-events:none} } /* ----------------------------------------------------------------------------- 18. ANIMATIONS D’APPARITION (discrètes) -------------------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* Si JS indisponible, rien ne doit rester invisible */ .no-js .reveal{opacity:1;transform:none} /* ----------------------------------------------------------------------------- 19. PRÉFÉRENCE « MOUVEMENT RÉDUIT » -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } .reveal{opacity:1;transform:none} .moment:hover .moment__media img, .card:hover,.recette:hover,.btn:hover{transform:none} .sticky-cta{transform:none} } /* ----------------------------------------------------------------------------- 20. PAGES LÉGALES (mentions-legales.html, confidentialite.html, cookies.html) -------------------------------------------------------------------------- */ .legal-header{ background:var(--creme); border-bottom:1px solid var(--peche-clair); } .legal-header__inner{ max-width:var(--wrap);margin-inline:auto; padding:.7rem clamp(1.25rem,5vw,2.5rem); min-height:var(--header-h); display:flex;align-items:center;justify-content:space-between;gap:var(--space-4); } .legal-header__logo{ display:flex;align-items:center; min-height:44px;padding-inline:2px;border-radius:8px; } .legal-header__logo img{height:32px;width:auto} .legal-header__back{ display:inline-flex;align-items:center;gap:.45rem; min-height:44px;padding:.4rem .3rem; font-weight:600;text-decoration:none;border-radius:8px; } .legal-header__back svg{width:18px;height:18px;transform:rotate(180deg)} .legal-header__back:hover{text-decoration:underline} .legal-hero{ padding-block:clamp(2.5rem,6vw,4rem) clamp(1.5rem,3vw,2rem); background: radial-gradient(110% 90% at 85% 0%,var(--peche-voile) 0%,transparent 62%), var(--creme); } .legal-hero h1{font-size:clamp(1.8rem,5vw,2.75rem);margin-bottom:var(--space-4)} .legal-hero__intro{color:var(--encre-douce);max-width:60ch;margin:0} .legal{ padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem); background:var(--blanc-casse); } .legal h2{ font-size:clamp(1.25rem,3vw,1.6rem); margin-top:clamp(2.25rem,4vw,3rem); padding-top:var(--space-6); border-top:2px solid var(--peche); } .legal > .wrap > h2:first-child{margin-top:0;padding-top:0;border-top:0} .legal h3{font-size:1.0625rem;margin-top:var(--space-8);margin-bottom:.5rem} .legal p,.legal li{color:var(--encre-douce)} .legal a{font-weight:600} .legal-list{ list-style:none;display:flex;flex-direction:column;gap:.6rem; margin:0 0 var(--space-4); } .legal-list li{position:relative;padding-left:1.4rem} .legal-list li::before{ content:'';position:absolute;left:0;top:.62em; width:8px;height:8px;border-radius:50%;background:var(--dore); } /* Bloc d'identité : libellé / valeur, lisible aussi en lecture d'écran */ .legal-id{ margin:0 0 var(--space-4); background:var(--creme); border:1.5px solid var(--peche-clair); border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,1.75rem); display:grid;gap:.85rem; } .legal-id div{display:grid;gap:.15rem} .legal-id dt{font-weight:700;font-size:.8125rem;letter-spacing:.06em; text-transform:uppercase;color:var(--marron)} .legal-id dd{margin:0;color:var(--encre)} @media (min-width:600px){ .legal-id div{grid-template-columns:14rem 1fr;gap:1rem;align-items:baseline} .legal-id dt{padding-top:.1rem} } .legal-note{ margin:var(--space-6) 0 0; padding:clamp(1rem,2.5vw,1.4rem); background:var(--peche-voile); border-radius:var(--r-md); font-size:.9375rem;color:var(--marron); } .legal__updated{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:var(--space-6); border-top:1px solid var(--peche-clair); font-size:.875rem;color:var(--encre-douce); } /* ----------------------------------------------------------------------------- 21. IMPRESSION -------------------------------------------------------------------------- */ @media print{ .prelaunch,.site-header,.sticky-cta,.nav-overlay,.form{display:none!important} body{background:#fff;color:#000} .reveal{opacity:1;transform:none} }