/* ========================================================================== La Belle Liégeoise — feuille de styles principale Design : export Claude Design « La Belle Liégeoise redesign » ========================================================================== */ /* -------------------------------------------------------------------------- 1. Polices -------------------------------------------------------------------------- */ @font-face { font-family: 'Commuters Sans'; src: url('../fonts/CommutersSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Commuters Sans'; src: url('../fonts/CommutersSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Commuters Sans'; src: url('../fonts/CommutersSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Commuters Sans'; src: url('../fonts/CommutersSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Commuters Sans'; src: url('../fonts/CommutersSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* `block` et non `swap` pour la police des titres : elle est préchargée dans le , donc prête en quelques millisecondes, et le titre s'affiche directement dans la bonne police au lieu de changer sous les yeux. */ @font-face { font-family: 'Commuters Heavy'; src: url('../fonts/CommutersSans-Heavy.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: block; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* Couleurs de marque */ --ink: #572713; /* brun signature */ --ink-soft: #7A4A18; /* brun moyen, liens */ --muted: #6B4630; /* texte courant sur fond clair */ --gold: #FABD5D; /* doré signature */ --gold-light: #FFD68F; --gold-deep: #A0641C; /* surtitres sur fond clair */ --sand: #EBC796; /* texte sur fond brun */ --cream: #FDF4E3; /* fond principal */ --cream-2: #F7E4C2; /* fond de section alterné */ --cream-3: #FDF7EA; /* cartes */ --cream-4: #F2E0C4; --shell: #F5E4CE; /* Univers « glaces » */ --ice-bg: #002C42; --ice-tile: #013C57; --ice-accent: #65C2C6; --ice-text: #DCEFF1; /* Traits */ --rule: rgba(87, 39, 19, .16); --rule-soft: rgba(87, 39, 19, .1); --rule-gold: rgba(250, 189, 93, .35); --rule-sand: rgba(235, 199, 150, .3); /* Typographie — pas de police de repli téléchargée : Archivo partait de Google Fonts dès 12 ms quand les polices de marque n'étaient demandées qu'à 47 ms, et c'est elle qu'on voyait pendant la bascule. Le repli est désormais la police système, disponible instantanément. */ --font-body: 'Commuters Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Commuters Heavy', 'Commuters Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Gabarit */ --wrap: 1280px; --gutter: 28px; --section-y: 80px; /* Mouvement — une seule courbe pour tout le site */ --ease: cubic-bezier(.2, .7, .2, 1); } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* L'attribut `hidden` doit toujours l'emporter. La règle [hidden] { display: none } vit dans la feuille du navigateur, et n'importe quelle règle d'auteur qui pose un `display` la neutralise — ici .stack (flex) et .media (block), qui servent justement de diapositives. D'où le !important : sans lui, les carrousels s'empilent. */ [hidden] { display: none !important; } html { overflow-y: scroll; scrollbar-gutter: stable; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } a { color: var(--ink-soft); text-decoration: none; } a:hover { color: var(--gold-deep); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; } p { margin: 0; } button { font-family: inherit; } /* L'en-tête collant ne doit pas recouvrir la cible d'une ancre. */ [id] { scroll-margin-top: 110px; } :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; } .on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--ink); padding: 14px 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .skip-link:focus { left: 0; color: var(--ink); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Gabarit -------------------------------------------------------------------------- */ .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); } .section--tight { padding-top: 64px; padding-bottom: 64px; } .section--head { padding-top: 70px; padding-bottom: 50px; } .section--cream2 { background: var(--cream-2); } .section--ink { background: var(--ink); color: var(--sand); } /* Bandeau doré : les textes y prennent un brun plus dense que sur crème */ .section--gold { background: var(--gold); color: var(--ink); } .section--gold .eyebrow { color: #7A4A18; } .section--gold .prose, .section--gold .note { color: #5A2E10; } .section--ruled { border-top: 1px solid var(--rule); } .section--banded { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* Deux colonnes qui se replient — le gabarit récurrent de la maquette */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 52px; align-items: center; } .split--wide { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; } .split--top { align-items: start; } .stack { display: flex; flex-direction: column; gap: 20px; } .stack--sm { gap: 16px; } .stack--lg { gap: 26px; } /* -------------------------------------------------------------------------- 5. Typographie de composition -------------------------------------------------------------------------- */ .eyebrow { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); } .on-dark .eyebrow, .eyebrow--gold { color: var(--gold); } .title-xl { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.03; letter-spacing: -.01em; } .title-lg { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06; } .title-md { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; } .title-sm { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; } .title-xs { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; } .title-slide { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; } .lede { font-size: 17px; line-height: 1.7; color: var(--muted); text-wrap: pretty; } .on-dark .lede { color: inherit; } .prose { font-size: 16px; line-height: 1.75; color: var(--muted); text-wrap: pretty; } .on-dark .prose { color: inherit; } .note { font-size: 13px; line-height: 1.6; color: var(--ink-soft); } .on-dark { color: var(--sand); } .on-dark h1, .on-dark h2, .on-dark h3 { color: #FFFFFF; } .rule-line { display: block; width: 34px; height: 2px; background: var(--gold-deep); } .section-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; } .section-head--line { align-items: center; gap: 18px; flex-wrap: nowrap; } .section-head--line .fill { flex: 1; height: 1px; background: rgba(87, 39, 19, .18); } /* -------------------------------------------------------------------------- 6. Boutons -------------------------------------------------------------------------- */ /* Forme pilule, accordée aux cartes du site (18 à 24 px de rayon) : le rectangle à angles vifs était le seul élément anguleux de la page. Au survol, un aplat balaie le bouton de gauche à droite et l'inverse complètement — la couleur de fond devient celle du texte, et inversement. C'est un pseudo-élément, donc aucun changement de HTML. `isolation: isolate` crée un contexte d'empilement : le ::before en z-index -1 se glisse alors entre le fond du bouton et son texte, au lieu de disparaître derrière le bouton entier. */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 999px; cursor: pointer; padding: 15px 30px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-align: center; transition: color .35s var(--ease), transform .12s ease; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-100%); transition: transform .45s var(--ease); } .btn:hover::before, .btn:focus-visible::before { transform: translateX(0); } /* La flèche avance d'un pas, sans jamais décaler le texte. */ .btn::after { content: "\2192"; font-size: 15px; line-height: 1; transition: transform .35s var(--ease); } .btn:hover::after, .btn:focus-visible::after { transform: translateX(5px); } .btn:active { transform: scale(.98); } /* Chaque variante définit sa couleur de repos, la couleur du balayage, et la couleur que prend le texte une fois le balayage passé. */ .btn--gold { background: var(--gold); color: var(--ink); } .btn--gold::before { background: var(--ink); } .btn--gold:hover { color: var(--gold); } .btn--ink { background: var(--ink); color: var(--cream); } .btn--ink::before { background: var(--gold); } .btn--ink:hover { color: var(--ink); } .btn--ghost-gold { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); padding: 14px 26px; letter-spacing: .1em; } .btn--ghost-gold::before { background: var(--gold); } .btn--ghost-gold:hover { color: var(--ink); } .btn--ghost-ice { background: transparent; color: var(--ice-accent); box-shadow: inset 0 0 0 1px var(--ice-accent); padding: 14px 26px; letter-spacing: .1em; } .btn--ghost-ice::before { background: var(--ice-accent); } .btn--ghost-ice:hover { color: var(--ice-bg); } .btn--start { align-self: flex-start; } /* Lien secondaire : même grammaire (flèche qui avance), mais sans aplat. Le trait se déroule depuis la gauche plutôt que d'être toujours plein. */ .link-underline { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); transition: color .18s ease; } .link-underline::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left center; transition: transform .4s var(--ease); } .link-underline:hover::before { animation: underline-sweep .5s var(--ease); } .link-underline::after { content: "\2192"; font-size: 14px; line-height: 1; transition: transform .35s var(--ease); } .link-underline:hover::after { transform: translateX(5px); } @keyframes underline-sweep { 0% { transform: scaleX(1); transform-origin: right center; } 49% { transform: scaleX(0); transform-origin: right center; } 50% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } } .on-dark .link-underline, .link-underline--gold { color: var(--gold); } .on-dark .link-underline:hover, .link-underline--gold:hover { color: var(--gold-light); } /* -------------------------------------------------------------------------- 7. Médias -------------------------------------------------------------------------- */ .media { display: block; overflow: hidden; background: var(--cream-4); } .media img { width: 100%; height: 100%; object-fit: cover; display: block; } .media--4-3 { aspect-ratio: 4 / 3; } .media--4-5 { aspect-ratio: 4 / 5; } .media--3-4 { aspect-ratio: 3 / 4; } .media--3-2 { aspect-ratio: 3 / 2; } .media--1-1 { aspect-ratio: 1 / 1; } .media--16-9 { aspect-ratio: 16 / 9; } .media--16-10 { aspect-ratio: 16 / 10; } .media--round { border-radius: 16px; } .media--contain { background: #FFFFFF; } .media--contain img { object-fit: contain; } /* -------------------------------------------------------------------------- 8. En-tête -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--ink); border-bottom: 1px solid var(--rule-gold); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 16px; padding-bottom: 16px; } /* Taille fluide : 18 px de haut sur un petit téléphone, 34 px dès 1300 px. Le fichier est recadré sur le mot-symbole, donc cette hauteur est bien celle des lettres — pas celle d'un cadre à moitié vide. `object-fit: contain` est le filet de sécurité : si la barre manque de place, le logo rétrécit proportionnellement au lieu de s'écraser. Sans lui, la hauteur fixe et la largeur contrainte déforment le mot-symbole. */ .site-header__logo { display: flex; align-items: center; min-width: 0; } .site-header__logo img { height: clamp(18px, 2.6vw, 34px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; } .nav { display: flex; align-items: center; gap: 18px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .nav__item { position: relative; display: flex; align-items: center; } .nav__link { position: relative; border: 0; background: transparent; cursor: pointer; padding: 4px 0; font-family: var(--font-body); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); transition: color .18s ease; } .nav__link:hover { color: var(--gold-light); } /* Le trait se déroule depuis la gauche, au survol comme sur la page active. */ .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease); } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } /* Le padding-top n'est pas décoratif : il fait le pont entre le déclencheur et le panneau, pour que la souris puisse descendre sans quitter la zone de survol et refermer le menu. */ .nav__panel { position: absolute; left: -20px; top: 100%; padding-top: 15px; z-index: 50; width: 326px; } .nav__panel-inner { position: relative; background: var(--cream); border-radius: 18px; box-shadow: 0 22px 48px rgba(87, 39, 19, .3), 0 2px 6px rgba(87, 39, 19, .14); display: flex; flex-direction: column; padding: 10px; gap: 2px; } /* Petite pointe vers le déclencheur : rattache le panneau à son onglet. */ .nav__panel-inner::before { content: ""; position: absolute; top: -6px; left: 32px; width: 14px; height: 14px; background: var(--cream); border-radius: 3px; transform: rotate(45deg); } .nav__sublink { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 9px; border-radius: 13px; text-align: left; color: var(--ink); transition: background-color .2s ease; } .nav__sublink img { width: 48px; height: 48px; flex: none; border-radius: 11px; object-fit: cover; display: block; transition: transform .4s var(--ease); } .nav__sublink-text { display: block; min-width: 0; } .nav__sublink-name { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: var(--ink); } .nav__sublink-desc { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .01em; text-transform: none; line-height: 1.3; color: var(--muted); } /* La flèche apparaît au survol plutôt que de décaler le texte : l'ancien glissement du padding faisait sauter la ligne sous le curseur. */ .nav__sublink::after { content: "\2192"; margin-left: auto; flex: none; font-size: 14px; line-height: 1; color: var(--gold-deep); opacity: 0; transform: translateX(-7px); transition: opacity .2s ease, transform .28s var(--ease); } .nav__sublink:hover, .nav__sublink:focus-visible { background: var(--cream-2); color: var(--ink); } .nav__sublink:hover img, .nav__sublink:focus-visible img { transform: scale(1.07); } .nav__sublink:hover::after, .nav__sublink:focus-visible::after { opacity: 1; transform: translateX(0); } /* Aplat doré plein en pilule : c'est l'appel à l'action de l'en-tête, il doit primer sur les liens qui l'entourent. Même balayage que les boutons du corps de page, en plus compact. */ .nav__cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; background: var(--gold); cursor: pointer; padding: 11px 20px; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: color .35s var(--ease); } .nav__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream); transform: translateX(-100%); transition: transform .42s var(--ease); } .nav__cta:hover::before, .nav__cta:focus-visible::before { transform: translateX(0); } .nav__cta::after { content: "\2192"; font-size: 13px; line-height: 1; transition: transform .35s var(--ease); } .nav__cta:hover::after, .nav__cta:focus-visible::after { transform: translateX(4px); } /* Barre mobile */ .site-header__mobile { display: none; align-items: center; gap: 10px; } .site-header__mobile .btn-franchise { border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); cursor: pointer; padding: 11px 16px; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .site-header__mobile .btn-menu { border: 1px solid var(--gold); border-radius: 999px; background: transparent; cursor: pointer; padding: 10px 16px; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); transition: background-color .2s ease, color .2s ease; } .site-header__mobile .btn-menu[aria-expanded="true"] { background: var(--gold); color: var(--ink); } .mobile-menu { border-top: 1px solid rgba(250, 189, 93, .3); padding: 12px var(--gutter) 22px; display: flex; flex-direction: column; gap: 2px; max-width: var(--wrap); margin: 0 auto; } .mobile-menu__group { display: flex; flex-direction: column; border-bottom: 1px solid rgba(250, 189, 93, .25); } .mobile-menu__link { display: block; text-align: left; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold); } /* Un filet vertical doré marque le niveau, et chaque entrée porte un tiret qui s'allonge à l'appui — l'équivalent sobre de la flèche du menu bureau. */ .mobile-menu__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 16px 4px; padding: 2px 0 2px 18px; border-left: 1px solid rgba(250, 189, 93, .3); } .mobile-menu__sublink { position: relative; padding: 9px 0; font-size: 15px; letter-spacing: .02em; color: var(--sand); transition: color .2s ease; } .mobile-menu__sublink::before { content: ""; position: absolute; left: -18px; top: 50%; width: 10px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--ease); } .mobile-menu__sublink:hover, .mobile-menu__sublink:focus-visible { color: var(--gold); } .mobile-menu__sublink:hover::before, .mobile-menu__sublink:focus-visible::before { transform: scaleX(1); } .mobile-menu .btn { margin-top: 14px; padding: 15px; } /* La navigation complète a besoin d'environ 1075 px pour tenir à côté du logo sans que rien ne se resserre. En dessous, on passe au menu mobile. */ @media (max-width: 1099px) { .site-header__nav { display: none; } .site-header__mobile { display: flex; } } @media (max-width: 767px) { .site-header__bar { gap: 12px; } .site-header__mobile { gap: 8px; } .site-header__mobile .btn-franchise { padding: 10px 11px; letter-spacing: .06em; } .site-header__mobile .btn-menu { padding: 9px 11px; letter-spacing: .08em; } } /* -------------------------------------------------------------------------- 9. Hero -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--ink); overflow: hidden; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .42; } .hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(87, 39, 19, .88) 0%, rgba(87, 39, 19, .62) 55%, rgba(87, 39, 19, .35) 100%); } .hero__inner { position: relative; padding-top: 120px; padding-bottom: 130px; display: flex; flex-direction: column; gap: 26px; } /* Le titre est blanc quelle que soit sa taille : viser la balise plutôt que la classe, sinon un hero qui change de gabarit se retrouve en brun foncé sur fond brun. */ .hero__inner h1, .hero__inner h2 { color: #FFFFFF; } .hero__inner .title-xl { max-width: 840px; } .hero__inner .lede { max-width: 520px; color: var(--shell); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; } .hero--franchise .hero__bg { opacity: .38; } .hero--franchise .hero__veil { background: linear-gradient(90deg, rgba(87, 39, 19, .9) 0%, rgba(87, 39, 19, .6) 60%, rgba(87, 39, 19, .35) 100%); } .hero--franchise .hero__inner { padding-top: 100px; padding-bottom: 110px; gap: 24px; } .hero--franchise .title-lg { font-size: clamp(34px, 5vw, 68px); line-height: 1.04; } /* Même traitement que les heros : photo assombrie sous un voile dégradé, plus dense à gauche pour que le titre reste lisible. */ .page-head { position: relative; background: var(--ink); color: var(--sand); overflow: hidden; } .page-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .4; } .page-head__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(87, 39, 19, .92) 0%, rgba(87, 39, 19, .66) 52%, rgba(87, 39, 19, .3) 100%); } /* Sur petit écran le texte occupe toute la largeur, y compris la zone où le voile s'éclaircit : on le renforce pour garder le paragraphe lisible. */ @media (max-width: 767px) { .page-head__veil { background: linear-gradient(90deg, rgba(87, 39, 19, .92) 0%, rgba(87, 39, 19, .72) 55%, rgba(87, 39, 19, .5) 100%); } } .page-head__inner { position: relative; padding-top: 70px; padding-bottom: 66px; display: flex; flex-direction: column; gap: 18px; } .page-head__inner .lede { max-width: 620px; } /* -------------------------------------------------------------------------- 10. Chiffres -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px; } .stat { display: flex; flex-direction: column; gap: 10px; } .stat__num { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; } .stat__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); } .stat__text { font-size: 14px; line-height: 1.6; color: var(--muted); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 44px 30px; } .kpi { display: flex; flex-direction: column; gap: 12px; } .kpi__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 4.6vw, 56px); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; } .kpi .rule-line { background: rgba(250, 189, 93, .55); } .kpi__label { font-size: 14px; line-height: 1.55; color: var(--sand); } /* -------------------------------------------------------------------------- 11. Grille des spécialités -------------------------------------------------------------------------- */ .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 22px; } .spec-card { display: flex; flex-direction: column; gap: 14px; color: inherit; } .spec-card:hover { color: inherit; } .spec-card:hover img { transform: scale(1.04); } .spec-card img { transition: transform .5s var(--ease); } .spec-card__title { font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--ink); margin: 0; } .spec-card__text { font-size: 14px; line-height: 1.6; color: var(--muted); } .spec-card__more { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); } /* La flèche avance d'un pas quand on survole la carte. */ .spec-card__more::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .28s var(--ease); } .spec-card:hover .spec-card__more::after, .spec-card:focus-visible .spec-card__more::after { transform: translateX(6px); } /* -------------------------------------------------------------------------- 12. Valeurs -------------------------------------------------------------------------- */ .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 44px 56px; } .value { display: flex; flex-direction: column; gap: 12px; } .value__num { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--gold); } .value__text { font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; } /* -------------------------------------------------------------------------- 13. Carrousels -------------------------------------------------------------------------- */ .carousel__stage { position: relative; overflow: hidden; } /* Pastilles rondes détachées, posées sur l'image, plutôt que deux carrés accolés : même vocabulaire de formes que les boutons en pilule. */ .carousel__arrows { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 10px; } .carousel__arrow { border: 0; cursor: pointer; border-radius: 50%; background: var(--ink); color: var(--gold); width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; box-shadow: 0 4px 14px rgba(87, 39, 19, .28); transition: background-color .2s ease, color .2s ease, transform .25s var(--ease); } .carousel__arrow:hover { background: var(--gold); color: var(--ink); transform: scale(1.08); } .carousel__arrow:active { transform: scale(1); } /* Le chevron part dans sa direction avant même le clic. */ .carousel__arrow span { display: inline-block; transition: transform .25s var(--ease); } .carousel__arrow:hover span { transform: translateX(-3px); } .carousel__arrow[data-carousel-next]:hover span { transform: translateX(3px); } .carousel__arrows--inset .carousel__arrow { width: 42px; height: 42px; font-size: 16px; } .carousel__counter { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); } .carousel__tabs { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .carousel__tab { border: 0; border-bottom: 1px solid var(--ink); background: transparent; cursor: pointer; padding: 0 0 4px; font-family: var(--font-body); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .45; transition: opacity .18s ease; } .carousel__tab:hover { opacity: .8; } .carousel__tab[aria-selected="true"] { opacity: 1; } /* Onglets « formats » : pas de soulignement, couleur variable */ .tabs-plain { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; margin-bottom: 30px; } .tabs-plain__tab { border: 0; background: transparent; cursor: pointer; padding: 0; font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(87, 39, 19, .45); transition: color .18s ease; } .tabs-plain__tab:hover { color: var(--ink-soft); } .tabs-plain__tab[aria-selected="true"] { color: var(--ink); } /* Onglets « saveurs de pâte » : soulignement à l'état actif */ .tabs-flavour { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .tabs-flavour__tab { border: 0; border-bottom: 1px solid transparent; background: transparent; cursor: pointer; padding: 0 0 4px; font-family: var(--font-body); font-size: 13px; letter-spacing: .04em; color: #A0764B; transition: color .18s ease; } .tabs-flavour__tab:hover { color: var(--ink-soft); } .tabs-flavour__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .carousel__body { min-height: 118px; } .carousel__body--ing { min-height: 150px; } .carousel__body--flavour { min-height: 82px; } .carousel__body--edition { min-height: 130px; } .ingredients { display: flex; flex-direction: column; gap: 10px; } .ingredient { display: flex; gap: 12px; align-items: baseline; } .ingredient__mark { color: var(--gold); font-size: 13px; } .ingredient__name { font-size: 16px; line-height: 1.5; color: var(--muted); } /* -------------------------------------------------------------------------- 14. Pages spécialités -------------------------------------------------------------------------- */ .panel { background: var(--cream-2); border-radius: 24px; padding: 44px 40px 48px; } .panel__label { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .panel__label .rule-line { width: 30px; } .panel__label span:last-child { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); } .panel__sub { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 32px; max-width: 660px; } .supp-banner { background: var(--ink); color: var(--sand); margin-top: 26px; } .supp-banner__inner { max-width: 900px; margin: 0 auto; padding: 62px var(--gutter) 58px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .supp-banner__label { display: flex; align-items: center; gap: 14px; } .supp-banner__label span:nth-child(odd) { width: 30px; height: 2px; background: var(--gold); } .supp-banner__label span:nth-child(even) { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .topping-title { background: var(--cream-3); padding: 14px 20px; text-align: center; font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 40px; } .topping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 36px 24px; } .topping { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; } .topping img { width: 96px; height: 96px; object-fit: contain; display: block; transition: transform .32s var(--ease); } .topping img + img { margin-top: -16px; } .topping:hover img { transform: translateY(-5px) scale(1.06); } .topping:hover img + img { transform: translateY(-2px) scale(1.06); } .topping__name { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); } .recipe-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 34px; } .recipe-card { display: flex; flex-direction: column; gap: 16px; } .recipe-card img { transition: transform .5s var(--ease); } .recipe-card:hover img { transform: scale(1.04); } .recipe-card__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); } .recipe-card__text { font-size: 15px; line-height: 1.6; color: var(--muted); } .cross-sell { background: var(--ink); color: var(--sand); } .cross-sell__inner { padding-top: 66px; padding-bottom: 66px; display: flex; flex-direction: column; gap: 26px; } .cross-sell__links { display: flex; flex-wrap: wrap; gap: 14px; } /* -------------------------------------------------------------------------- 15. Page glaces -------------------------------------------------------------------------- */ .ice { background: var(--ice-bg); color: var(--ice-text); } .ice .eyebrow, .ice .stat__label { color: var(--ice-accent); } .ice h1, .ice h2, .ice h3 { color: #FFFFFF; } .ice .lede, .ice .prose { color: var(--ice-text); } .ice-stats { display: flex; flex-wrap: wrap; gap: 30px; border-top: 1px solid rgba(101, 194, 198, .35); padding-top: 20px; } .ice-stat__num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--ice-accent); } .ice-stat__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; } .gallery figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ice-tile); } .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .gallery figure:hover img { transform: scale(1.06); } .ice .section--ruled { border-top-color: rgba(101, 194, 198, .35); } /* -------------------------------------------------------------------------- 16. Franchise -------------------------------------------------------------------------- */ .video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; background: var(--ink); box-shadow: 0 22px 50px rgba(87, 39, 19, .22); } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .watermark { position: absolute; display: block; pointer-events: none; opacity: .1; } .watermark--tl { left: -80px; top: -60px; width: 300px; } .watermark--br { right: -70px; bottom: -70px; width: 340px; opacity: .12; } /* Colonnes larges : sous 420 px, le titre de l'étape se brise en quatre ou cinq lignes. Deux colonnes sur grand écran laissent respirer le texte. Pas de `grid-auto-rows: 1fr` ici : cette valeur aligne TOUTES les lignes sur la plus haute du tableau, et la dernière étape — qui porte un paragraphe en plus — doublait alors la hauteur des sept autres. `height: 100%` sur la carte suffit à égaliser celles d'une même ligne. */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 22px 30px; } .step { display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: center; height: 100%; background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 20px; padding: 26px 30px; box-shadow: 0 2px 10px rgba(87, 39, 19, .05); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .step:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(87, 39, 19, .1); } .step:hover .step__img img { transform: scale(1.05); } .step__img { position: relative; width: 132px; height: 132px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(87, 39, 19, .14); } .step__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); } .step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .step__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--gold-deep); } .step__head .fill { flex: 1; height: 1px; background: var(--rule); } .step__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--ink); text-wrap: pretty; } .step__text { font-size: 14px; line-height: 1.6; color: var(--sand); margin-top: 12px; } .step--final { background: var(--ink); border-color: var(--ink); } .step--final .step__img { border: 2px solid var(--gold); } .step--final .step__num { color: var(--gold); } .step--final .step__head .fill { background: rgba(250, 189, 93, .4); } .step--final .step__title { color: #FFFFFF; font-size: 22px; } @media (max-width: 479px) { .step { grid-template-columns: 1fr; gap: 20px; } .step__img { width: 100%; height: 180px; } } /* -------------------------------------------------------------------------- 17. Actualités -------------------------------------------------------------------------- */ .news-flag { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .news-flag__badge { background: var(--gold); color: var(--ink); padding: 6px 12px; } .news-flag__date { color: var(--gold-deep); } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 30px; } .news-card { display: flex; flex-direction: column; height: 100%; background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(87, 39, 19, .1); } .news-card__media { aspect-ratio: 3 / 2; overflow: hidden; } .news-card__media img { width: 100%; height: 100%; display: block; transition: transform .5s var(--ease); } .news-card:hover .news-card__media img { transform: scale(1.04); } .news-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 28px; } .news-card__meta { display: flex; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); } .news-card__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--ink); text-wrap: pretty; } .news-card__text { font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty; } /* -------------------------------------------------------------------------- 18. Artisans -------------------------------------------------------------------------- */ .artisans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 44px; } .artisan { display: flex; flex-direction: column; gap: 18px; } .artisan blockquote { margin: 0; font-style: italic; font-size: 22px; line-height: 1.4; color: var(--cream); } .artisan__role { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .artisan__text { font-size: 15px; line-height: 1.75; text-wrap: pretty; } /* -------------------------------------------------------------------------- 19. Formulaires -------------------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 14px; } .form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; } /* Champs arrondis, pour ne pas laisser des rectangles à angles vifs à côté de boutons en pilule. Le rayon reste modéré : une pilule irait mal à un champ multiligne. */ .form input, .form textarea { width: 100%; border: 1px solid rgba(87, 39, 19, .3); background: transparent; padding: 15px 18px; font-family: var(--font-body); font-size: 15px; color: var(--ink); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(160, 100, 28, .16); } .form--dark input:focus, .form--dark textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(250, 189, 93, .2); } .form textarea { resize: vertical; } .form input::placeholder, .form textarea::placeholder { color: rgba(87, 39, 19, .5); } .form--dark input, .form--dark textarea { border-color: rgba(235, 199, 150, .45); color: var(--cream); } .form--dark input::placeholder, .form--dark textarea::placeholder { color: rgba(235, 199, 150, .6); } .form__field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } /* Piège à robots. Déplacé hors écran plutôt que masqué par display:none : certains automates ignorent les champs non affichés, mais remplissent ceux-ci. Un visiteur ne le voit ni ne l'atteint au clavier. */ .form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__status { font-size: 14px; color: var(--gold-deep); min-height: 21px; } .form--dark .form__status { color: var(--gold); } /* -------------------------------------------------------------------------- 20. Contact -------------------------------------------------------------------------- */ .contact-info { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.7; color: var(--muted); } .social-row { border-top: 1px solid var(--rule); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 20 bis. Page « Nous trouver » -------------------------------------------------------------------------- */ .find-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 44px; align-items: start; padding: 44px 0 80px; } #map { width: 100%; } #map svg { width: 100%; height: auto; display: block; } #map .land { fill: var(--cream-2); stroke: var(--ink); stroke-width: .8; } #map .neighbour { fill: none; stroke: rgba(87, 39, 19, .18); stroke-width: .7; } #map .pin { fill: var(--gold); stroke: var(--ink); stroke-width: 1.2; cursor: pointer; transition: r .18s ease, fill .18s ease; } #map .pin:hover { fill: #FFFFFF; } #map .pin.is-on { fill: var(--ink); stroke: var(--gold); } #map .maplabel { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-soft); pointer-events: none; } /* Médaillon des territoires hors fenêtre européenne : fond plein pour se détacher du trait des côtes qu'il recouvre, et cadre pour signaler qu'on change d'échelle. */ #map .cartouche__cadre { fill: var(--cream); stroke: var(--rule); stroke-width: 1; } #map .cartouche__titre { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--gold-deep); pointer-events: none; } .map-fallback { padding: 22px 20px; border: 1px solid var(--rule); font-size: 14px; line-height: 1.7; color: var(--muted); } .shop-list { display: flex; flex-direction: column; gap: 1px; background: var(--rule); list-style: none; margin: 0; padding: 0; } .shop-card { background: var(--cream); padding: 22px 20px; display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; transition: background-color .18s ease; } .shop-card.is-on { background: var(--cream-2); } .shop-card h3 { grid-column: 1; margin: 0; } .shop-card__name { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); transition: color .18s ease, transform .22s var(--ease); } .shop-card__name:hover { color: var(--gold-deep); transform: translateX(4px); } .shop-card__kind { grid-column: 2; grid-row: 1; align-self: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid rgba(87, 39, 19, .3); padding: 5px 9px; height: fit-content; } .shop-card__addr { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; color: var(--muted); } .shop-card__hours { grid-column: 1 / -1; font-size: 13px; line-height: 1.7; color: var(--ink); } .shop-card__acts { grid-column: 1 / -1; display: flex; gap: 16px; margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 20 ter. Pages légales -------------------------------------------------------------------------- */ .legal { padding-top: 64px; padding-bottom: 88px; } .legal__intro { max-width: 68ch; } .legal__maj { margin-top: 14px; font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); } .legal__corps { max-width: 72ch; margin-top: 52px; } .legal__corps h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; margin: 46px 0 16px; padding-top: 26px; border-top: 1px solid var(--rule); } .legal__corps h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal__corps h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .04em; margin: 28px 0 8px; color: var(--ink); } .legal__corps p, .legal__corps li { font-size: 16px; line-height: 1.75; color: var(--muted); text-wrap: pretty; } .legal__corps p + p { margin-top: 14px; } .legal__corps ul { margin: 14px 0 0; padding-left: 22px; } .legal__corps li + li { margin-top: 8px; } .legal__corps a { text-decoration: underline; text-underline-offset: 3px; } /* Encadré neutre pour les rappels et définitions. */ .legal__note { background: var(--cream-2); border-radius: 16px; padding: 22px 26px; margin-top: 22px; } .legal__note p { color: var(--ink); } /* Donnée d'immatriculation restant à fournir. Volontairement voyante : une mention légale publiée avec un champ vide est une infraction, ce surlignage rend l'oubli impossible à manquer en relecture. */ .legal__todo { background: var(--gold); color: var(--ink); font-weight: 600; padding: 1px 7px; border-radius: 5px; white-space: nowrap; } /* -------------------------------------------------------------------------- 21. Pied de page -------------------------------------------------------------------------- */ .site-footer { background: var(--ink); color: var(--sand); position: relative; overflow: hidden; } .site-footer__cols { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; padding-top: 64px; padding-bottom: 30px; } .site-footer__col { display: flex; flex-direction: column; gap: 12px; } .site-footer__brand { gap: 14px; } .site-footer__brand img { width: 104px; height: 104px; display: block; } .site-footer__name { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--cream); } .site-footer__baseline { font-size: 14px; line-height: 1.7; } .site-footer__title { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .site-footer__col a { display: inline-block; font-size: 14px; color: var(--sand); transition: color .18s ease, transform .22s var(--ease); } .site-footer__col a:hover { color: var(--gold); transform: translateX(4px); } .site-footer__contact { font-size: 14px; line-height: 1.7; } /* Pastilles rondes, comme les flèches de carrousel : le doré s'inverse au survol, dans la continuité des boutons. */ .social-icons { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 2px 0 0; padding: 0; } .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: var(--gold); background: rgba(250, 189, 93, .12); transition: background-color .2s ease, color .2s ease, transform .25s var(--ease); } .social-icons a:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); } .social-icons svg { width: 19px; height: 19px; fill: currentColor; display: block; } .site-footer__legal { position: relative; padding-bottom: 40px; } .site-footer__legal-inner { border-top: 1px solid rgba(235, 199, 150, .25); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; font-size: 12px; letter-spacing: .06em; } .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .site-footer__legal-links a { color: var(--sand); transition: color .18s ease; } .site-footer__legal-links a:hover { color: var(--gold); } /* -------------------------------------------------------------------------- 22. Animations Trois familles, toutes calées sur la même courbe (--ease) pour que le site ait un seul « geste » : · l'entrée de page — data-enter, joué au chargement · l'apparition au défilement — data-rise (blocs) et data-stagger (grilles) · les micro-réactions — survol, carrousels, menus Tout est désactivé d'un bloc par prefers-reduced-motion, en fin de section. -------------------------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes rise-soft { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes settle { from { transform: scale(1.06); } to { transform: none; } } /* --- Entrée de page : les blocs au-dessus de la ligne de flottaison ------- */ [data-enter] > * { animation: rise .9s var(--ease) both; } [data-enter] > *:nth-child(1) { animation-delay: .06s; } [data-enter] > *:nth-child(2) { animation-delay: .16s; } [data-enter] > *:nth-child(3) { animation-delay: .26s; } [data-enter] > *:nth-child(4) { animation-delay: .36s; } [data-enter] > *:nth-child(5) { animation-delay: .46s; } /* La photo de fond se pose doucement au lieu d'apparaître figée. */ .hero__bg, .page-head__bg { animation: settle 2s var(--ease) both; } /* --- Apparition au défilement -------------------------------------------- Masqués seulement si JS peut les révéler : la classe `no-js` est retirée par un script en tête de page, donc avant le premier rendu. */ [data-rise] { opacity: 0; } [data-rise].is-visible { animation: rise .7s var(--ease) both; } [data-stagger] > * { opacity: 0; } [data-stagger].is-visible > * { animation: rise-soft .65s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); } .no-js [data-rise], .no-js [data-stagger] > *, [data-rise].is-static, [data-stagger].is-static > * { opacity: 1; animation: none; } /* --- Transition entre les pages ------------------------------------------ Navigation fondue d'une page à l'autre, là où le navigateur la gère (Chrome, Edge, Safari 18+). Ailleurs, rien ne change. L'en-tête porte un nom de transition : il reste en place pendant que le contenu se renouvelle. */ @view-transition { navigation: auto; } .site-header { view-transition-name: site-header; } ::view-transition-old(root) { animation: fade-in .16s ease reverse both; } ::view-transition-new(root) { animation: rise-soft .34s var(--ease) both; } /* --- Carrousels : la vue entrante se pose, elle ne surgit pas ------------- */ [data-slide].is-entering { animation: rise-soft .4s var(--ease) both; } .media[data-slide].is-entering { animation: fade-in .32s ease both; } .media[data-slide].is-entering img { animation: settle .55s var(--ease) both; } /* --- Menus ---------------------------------------------------------------- */ .nav__panel-inner { animation: rise-soft .22s var(--ease) both; } .mobile-menu { animation: rise-soft .28s var(--ease) both; } .mobile-menu > * { animation: rise-soft .4s var(--ease) both; } .mobile-menu > *:nth-child(1) { animation-delay: .04s; } .mobile-menu > *:nth-child(2) { animation-delay: .09s; } .mobile-menu > *:nth-child(3) { animation-delay: .14s; } .mobile-menu > *:nth-child(4) { animation-delay: .19s; } .mobile-menu > *:nth-child(5) { animation-delay: .24s; } .mobile-menu > *:nth-child(6) { animation-delay: .29s; } /* --- En-tête : se resserre une fois la page défilée ----------------------- */ .site-header { transition: box-shadow .3s ease; } .site-header__bar { transition: padding .3s var(--ease); } .site-header__logo img { transition: height .3s var(--ease); } .site-header.is-scrolled { box-shadow: 0 12px 30px rgba(87, 39, 19, .28); } .site-header.is-scrolled .site-header__bar { padding-top: 9px; padding-bottom: 9px; } .site-header.is-scrolled .site-header__logo img { height: clamp(17px, 2.1vw, 28px); } /* --- Mouvement réduit : on coupe tout -------------------------------------- Les blocs concernés retrouvent leur opacité pleine, les transitions deviennent instantanées et la navigation fondue est désactivée. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-rise], [data-stagger] > *, [data-enter] > *, [data-slide].is-entering { opacity: 1 !important; transform: none !important; animation: none !important; } .hero__bg, .page-head__bg, .media[data-slide].is-entering img, .nav__panel-inner, .mobile-menu, .mobile-menu > * { animation: none !important; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } @view-transition { navigation: none; } } /* -------------------------------------------------------------------------- 23. Ajustements petits écrans -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --gutter: 20px; --section-y: 56px; } /* 16 px minimum : en dessous, Safari iOS zoome sur le champ dès qu'on le touche et l'utilisateur doit repincer pour revenir. */ .form input, .form textarea { font-size: 16px; } /* Cibles tactiles. Les liens du pied de page et le logo ne faisaient que 18 à 22 px de haut : sous les 24 px du critère WCAG 2.5.8, on vise à côté une fois sur trois avec le pouce. Le remplissage agrandit la zone sensible ; l'écart visuel est compensé par un gap réduit. */ .site-header__logo { padding: 6px 0; } .site-footer__col { gap: 6px; } .site-footer__col a, .site-footer__legal-links a { padding: 5px 0; } .hero__inner { padding-top: 84px; padding-bottom: 88px; } .hero--franchise .hero__inner { padding-top: 72px; padding-bottom: 76px; } .split { gap: 36px; } .panel { padding: 30px 22px 34px; border-radius: 18px; } .stat__num { font-size: 50px; } .supp-banner__label span:nth-child(odd) { width: 18px; } }