ni ne portent d'overflow qui en ferait un conteneur de scroll), pas sur

. Testé en conditions réelles : posé sur

, qui n'est PAS le conteneur qui défile, Chrome bloque purement et simplement le scroll à la molette sur toute la page (confirmé par bascule none/proximity — 0px de mouvement avec proximity sur main, scroll normal avec none). C'est très probablement la cause du scroll qui "part dans tous les sens" signalé sur mobile : un scroll qui ne prend pas la moitié du temps pousse à insister/swiper plus fort, d'où des sauts erratiques une fois qu'il finit par répondre. */ html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-height); scroll-snap-type: y proximity; } body{ margin: 0; background: var(--black); color: var(--off-white); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img{ max-width: 100%; display: block; } button{ font-family: inherit; cursor: pointer; } h1, p{ margin: 0; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link{ position: absolute; left: 0; top: 0; transform: translateY(-120%); background: var(--off-white); color: var(--black); padding: .8em 1.2em; z-index: 1000; text-decoration: none; font-family: var(--font-body); transition: transform .2s var(--ease); } .skip-link:focus{ transform: translateY(0); } /* ========================================================================== NAVIGATION — commune à toutes les pages Signée comme le reste du site : grain pellicule, liseré "braise" en dégradé plutôt qu'un trait plat, emblème qui respire doucement, liens numérotés façon sommaire éditorial. ========================================================================== */ .site-nav{ position: fixed; inset: 0 0 auto 0; z-index: 50; /* au-dessus du grain (5), du vignettage (2) et du contenu (3-4) */ background: linear-gradient(to bottom, rgba(8,5,4,.88), rgba(8,5,4,.74)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s var(--ease), box-shadow .3s var(--ease); } /* Liseré du bas en dégradé "ciel de feu" plutôt qu'une bordure plate — un fil incandescent qui reprend la palette de la marque sur toute pages. */ .site-nav::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(to right, transparent, var(--red-primary) 15%, var(--orange-fire) 50%, var(--orange-glow) 65%, transparent 92%); opacity: .55; } /* Une fois qu'on a quitté le haut de page, la barre s'affirme un peu plus (fond plus opaque + ombre portée) pour rester lisible sur tout contenu défilé en dessous. Classe posée par js/main.js. */ .site-nav.is-scrolled{ background: linear-gradient(to bottom, rgba(8,5,4,.97), rgba(8,5,4,.93)); box-shadow: 0 12px 30px rgba(0,0,0,.35); } .site-nav__bar{ position: relative; max-width: 1120px; margin: 0 auto; height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.2rem, 5vw, 2.5rem); } .site-nav__brand{ display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: .04em; color: var(--off-white); text-decoration: none; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.5); } /* ---------- Bouton menu (mobile) ---------- */ .site-nav__toggle{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.4rem; height: 2.4rem; margin-right: -.5rem; border: 0; background: transparent; padding: 0; } .site-nav__toggle-bar{ display: block; width: 1.4rem; height: 2px; background: var(--off-white); transition: transform .25s var(--ease), opacity .25s var(--ease), background .25s var(--ease); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar{ background: var(--orange-glow); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2){ opacity: 0; } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ---------- Menu — mobile-first : replié sous la barre par défaut ---------- */ .site-nav__menu{ position: absolute; top: 100%; left: 0; right: 0; background: linear-gradient(165deg, rgba(8,5,4,.98), rgba(44,7,5,.96) 65%, rgba(8,5,4,.98)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } /* Même filigrane losange que le reste du site, en watermark discret. */ .site-nav__menu::before{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 2 L62 32 L32 62 L2 32 Z' fill='none' stroke='%23efe6d8' stroke-width='1'/%3E%3C/svg%3E"); background-size: 64px 64px; } /* Écho géant, très estompé, de l'emblème — signature discrète plutôt qu'un simple aplat de couleur derrière les liens. */ .site-nav__menu::after{ content: ""; position: absolute; right: -3.5rem; bottom: -3.5rem; width: 14rem; height: 14rem; border-radius: 50%; border: 10px solid rgba(255,138,61,.09); pointer-events: none; } .site-nav.is-open .site-nav__menu{ max-height: 26rem; } .site-nav__menu ul{ position: relative; list-style: none; margin: 0; padding: .4rem clamp(1.2rem, 5vw, 2.5rem) 1.2rem; display: flex; flex-direction: column; } .site-nav__menu li{ display: flex; align-items: center; gap: .7rem; border-top: 1px solid rgba(239,230,216,.08); } .site-nav__menu li:first-child{ border-top: 0; } .site-nav__menu a{ position: relative; display: block; flex: 1; padding: .85rem 0; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--off-white-soft); text-decoration: none; transition: color .2s var(--ease); } /* Soulignement "braise" qui se déploie au survol plutôt qu'un trait fixe — déjà déployé sur la page courante. */ .site-nav__menu a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 2px; background: var(--orange-glow); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .site-nav__menu a:hover, .site-nav__menu a:focus-visible{ color: var(--off-white); } .site-nav__menu a:hover::after, .site-nav__menu a:focus-visible::after{ transform: scaleX(1); } .site-nav__menu a[aria-current="page"]{ color: var(--orange-glow); } .site-nav__menu a[aria-current="page"]::after{ transform: scaleX(1); } /* 860px plutôt que 700px : avec Fraunces (plus large que l'ancienne police condensée), la marque + les 5 liens n'ont plus la place de tenir sur une ligne en dessous de ~820px — vérifié en mesurant l'espace réel entre le logo et le premier lien à plusieurs largeurs. */ @media (min-width: 860px){ .site-nav__toggle{ display: none; } .site-nav__menu{ position: static; max-height: none; overflow: visible; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .site-nav__menu::before, .site-nav__menu::after{ content: none; /* le filigrane et l'écho ne servent que le panneau mobile */ } .site-nav__menu ul{ flex-direction: row; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); padding: 0; } .site-nav__menu li{ border-top: 0; gap: .35rem; } .site-nav__menu a{ flex: none; padding: .3rem 0; font-size: .78rem; } .site-nav__menu a::after{ bottom: -.15rem; } } /* ---------- Scroll rhythm ---------- */ /* scroll-snap-type est sur , pas ici (voir en tête de fichier). */ .section{ position: relative; /* 100vh d'abord (repli navigateurs anciens), 100svh ensuite : la DERNIÈRE valeur valide l'emporte en cascade, donc l'ordre inverse annulerait silencieusement svh. 100vh se cale sur la barre d'adresse mobile *cachée*, plus haut que l'espace réellement visible tant qu'elle est affichée — avec le scroll-snap de #main, ça faisait "bouger"/mal s'aligner les sections à l'apparition/disparition de la barre. 100svh (small viewport height) reste stable dans les deux cas : c'est la valeur qui doit gagner ici. Même ordre à respecter partout où ce couple est dupliqué (voir .portrait, .story-hero, .story-finale, merci.html, 404.html). */ min-height: 100vh; min-height: 100svh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; scroll-snap-align: start; padding: clamp(1.5rem, 6vw, 3rem); } /* ========================================================================== Texture — grain de pellicule ========================================================================== */ .film-grain{ isolation: isolate; } /* inset en px fixes (pas en %) et volontairement petit : juste assez de marge pour couvrir un arrondi subpixel, sans plus. Un `inset:-10%` testé ici gonflait le scrollWidth de la section bien au-delà de sa largeur réelle (jusqu'à +37px sur un écran de 375px de large) — écarts masqués visuellement par overflow:hidden mais toujours mesurés comme un débordement horizontal, un filet de sécurité à ne pas dépendre en silence. */ .film-grain::after{ content: ""; position: absolute; inset: -4px; pointer-events: none; z-index: 5; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ---------- Motif losanges en filigrane ---------- */ .diamond-pattern::before{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 2 L62 32 L32 62 L2 32 Z' fill='none' stroke='%23efe6d8' stroke-width='1'/%3E%3C/svg%3E"); background-size: 64px 64px; } /* ========================================================================== SECTION 1 — HERO ========================================================================== */ .hero{ /* Repli uni si l'image est absente ; sinon elle couvre tout le cadre. Le dégradé assombrit le haut (titre) et le bas (bouton) à l'identique — même courbe, miroir haut/bas — et finit en noir plein aux deux bords : à 0% pour donner du contraste au titre, à 100% pour se fondre sans coupure dans la section 2. */ background-color: var(--red-primary); background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 12%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.75) 88%, rgba(0,0,0,1) 100%), url("../Illustrations/background.webp"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } /* Grille à 3 rangées, calée en position absolue sur tout le cadre de la section (plus fiable qu'un height:100% en flexbox, dont la résolution dépend d'une hauteur "définie" du parent). Fractions asymétriques : pousse le logo un peu sous le centre optique, et le CTA vers le bas du cadre plutôt que collé au logo. */ .hero__stack{ position: absolute; inset: 0; display: grid; /* grid-template-columns explicite : sans ça, l'unique colonne implicite se dimensionne sur son contenu (au lieu de toute la largeur) et justify-items:center centre alors DANS cette colonne déjà décalée, pas dans la section — d'où un rendu qui semblait mal centré/débordant. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto .9fr; justify-items: center; /* inset:0 ignore le padding de .hero (position:absolute) : on le recrée ici pour garder une marge de sécurité de chaque côté. */ padding: 0 clamp(1.5rem, 6vw, 3rem); } .hero__top{ align-self: end; /* Remonte le bloc titre (nom + signature) sans toucher au logo ni au CTA : ceux-ci vivent dans les rangées suivantes de la grille et ne bougent pas — seule la marge sous ce bloc augmente. */ padding-bottom: clamp(5.6rem, 17vh, 9.5rem); } .hero__bottom{ align-self: end; padding-bottom: clamp(1.4rem, 6vh, 3rem); } .hero .vignette{ position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 18vw 2vw rgba(0,0,0,.4); } /* Nom ("Laarichi") et signature ("Enfant du Monde") empilés sur deux lignes, hiérarchie marquée plutôt qu'un même poids pour les deux : le nom de marque domine, la signature reste lisible mais clairement secondaire — align-items:center recentre la ligne la plus courte sur la plus longue (jamais alignées à gauche l'une sous l'autre). */ .hero-title{ position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; max-width: 100%; } /* Police Anton (display gras condensé, cf. Illustrations de référence images/teste.webp) avec un rendu "contour néon" : lettres creuses (fond de la section visible à travers), contour et lueur rouge #960000 (--red-primary, couleur de marque). white-space:nowrap empêche la ligne de se rompre. Anton est bien plus condensée qu'Horizon (~0.62em de chasse par lettre contre ~0.9em) donc le coefficient vw est recalé en conséquence pour occuper une largeur comparable sans jamais revenir à la ligne, du plus petit mobile (320px) au plus grand desktop. Fond transparent + contour posés dans un @supports : un navigateur sans text-stroke retombe sur un remplissage plein (voir plus bas) plutôt que du texte invisible. Coefficient vw et bornes mesurés séparément pour "Laarichi" seul (8 lettres) — vérifié sans débordement de 320px à 2560px, ~85-95% de la largeur disponible sur mobile/tablette (jusqu'à ~1000px), plafonné ensuite à 6.5rem : au-delà, 11vw dépassait déjà 6.5rem avant même d'atteindre les résolutions PC courantes (1280-1366px, très répandues sur laptop) — la marge n'y était plus que de 64 à 95px de chaque côté, trop juste pour du "presque déborde" en pratique. Plafond abaissé sans toucher au coefficient : mobile/tablette gardent exactement le même rendu (le plafond ne s'y déclenche pas), seul le desktop rétrécit, avec 200px+ de marge de chaque côté à 1280px comme à 1920px. */ .hero-title__name{ display: block; white-space: nowrap; text-align: center; font-family: "Anton", var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .96; color: var(--red-primary); letter-spacing: .01em; font-size: clamp(1rem, 11vw, 6.5rem); text-shadow: 0 0 2px rgba(200,30,20,.9), 0 0 7px rgba(150,0,0,.55), 0 0 16px rgba(80,0,0,.35); } @supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black){ .hero-title__name{ color: transparent; -webkit-text-stroke: .03em var(--red-primary); text-stroke: .03em var(--red-primary); } } /* Même traitement que .hero-title__name (police, contour néon), à une échelle réduite (~45% de la taille du nom, mesuré) — assez petit pour rester nettement secondaire, assez grand pour rester confortablement lisible même sur mobile étroit (jamais en dessous de ~16px en usage réel, voir le coefficient vw). Propriétés dupliquées plutôt que partagées via une classe commune : les deux tailles ont été calibrées indépendamment (chaque ligne a sa propre longueur, donc son propre rapport largeur/taille de police) et gagnent à rester faciles à ajuster séparément. */ .hero-title__tagline{ display: block; white-space: nowrap; text-align: center; font-family: "Anton", var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .96; color: var(--red-primary); letter-spacing: .01em; font-size: clamp(.85rem, 5vw, 2.9rem); text-shadow: 0 0 2px rgba(200,30,20,.9), 0 0 7px rgba(150,0,0,.55), 0 0 16px rgba(80,0,0,.35); } @supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black){ .hero-title__tagline{ color: transparent; -webkit-text-stroke: .03em var(--red-primary); text-stroke: .03em var(--red-primary); } } /* ---------- Logo ---------- Aucun cadre ni fond propre : le logo repose à nu sur le fond de la section (voir .hero__stack plus haut pour le centrage exact). Léger remonte via transform (pure peinture, ne modifie pas la hauteur de la rangée "auto" qui le porte) plutôt qu'une marge négative, pour ne jamais grignoter l'espacement avec le CTA sous lui. */ .hero-logo-slot{ position: relative; z-index: 3; width: min(26vw, 140px); display: flex; align-items: center; justify-content: center; transform: translateY(-1rem); } .hero-logo-slot__hint{ font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; color: rgba(239,230,216,.55); } .hero-logo{ width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); } /* ---------- CTA ---------- */ .cta-button{ position: relative; z-index: 3; display: inline-block; padding: .85rem 2.4rem; border-radius: 2px; background: var(--red-primary); color: var(--off-white); font-family: var(--font-body); font-weight: 600; font-size: .84rem; text-transform: uppercase; letter-spacing: .18em; text-decoration: none; box-shadow: 0 10px 24px rgba(0,0,0,.4); transition: background .25s var(--ease), transform .2s var(--ease); } .cta-button:hover, .cta-button:focus-visible{ background: var(--orange-cta); transform: translateY(-2px); } /* ========================================================================== SECTION 2 — TRANSITION ========================================================================== */ .transition{ /* Même principe que le raccord section 1 → section 2 (voir .hero) : un point d'ancrage à chaque bord (une seule valeur, jamais un palier tenu sur plusieurs %) et tout le mouvement du dégradé au milieu. Le haut part de noir plein (raccord avec le bas de la section 1) puis s'efface vite pour révéler fond-1.png. Après le plateau clair, RETOUR EN FONDU CONTINU vers --black-deep jusqu'à 100% pile — sans palier tenu avant l'arrivée : --black-deep n'est atteint qu'au tout dernier pixel, qui est très exactement la couleur de départ de la section 3 (.portrait et .portrait__scrim démarrent aussi sur --black-deep). Le raccord se fait donc sur UN SEUL point de couleur commune, pas deux paliers noirs empilés de part et d'autre — c'était le bandeau noir "mort" du rendu précédent. */ background-color: var(--black-deep); background-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 80%, var(--black-deep) 97%, var(--black-deep) 100%), url("../Illustrations/fond-1.png"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } /* opacity/transform/transition : fournis par .reveal (voir plus bas) */ .transition-text{ font-family: var(--font-body); font-weight: 500; font-style: italic; font-size: clamp(1.1rem, 4vw, 1.6rem); letter-spacing: .02em; color: var(--off-white-dim); text-align: center; max-width: 18ch; } /* ========================================================================== SECTION 3 — VISUEL SIGNATURE + FORMULAIRE ========================================================================== */ .signature{ padding: 0; } .portrait{ position: relative; width: 100%; height: 100%; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; /* Le fichier fournit l'image ; repli en rouge uni (--red-primary, #960000) tant qu'il est absent — même couleur d'aplat que la section 1, pour une identité cohérente entre les deux sections. */ background-color: var(--red-primary); background-image: url("../assets/hero-portrait.jpg"); background-size: cover; background-position: center 20%; background-repeat: no-repeat; } .portrait__scrim{ position: absolute; inset: 0; z-index: 2; /* Même style d'ombre que .hero (section 1) : noir plein aux deux bords, clair au centre — garde le formulaire lisible tout en unifiant le traitement visuel entre les sections 1 et 3. */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 12%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.75) 88%, rgba(0,0,0,1) 100%); } /* opacity/transform/transition : fournis par .reveal (voir plus bas) */ .signature__content{ position: relative; z-index: 4; width: min(90vw, 420px); display: flex; flex-direction: column; align-items: center; gap: .9rem; } .signature__kicker{ font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .28em; font-size: .72rem; color: var(--off-white); text-shadow: 0 1px 6px rgba(0,0,0,.6); } .contact-form{ width: 100%; display: flex; flex-direction: column; gap: .8rem; } /* Piège à robots : invisible pour tout le monde (visuel ET lecteur d'écran), contrairement à .sr-only qui reste volontairement exposé aux technologies d'assistance. Un champ honeypot doit rester hors de portée des deux, sinon un·e utilisateur·rice non-voyant·e pourrait le remplir par erreur et voir son message légitime rejeté comme spam. */ .contact-form__trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form__field{ display: flex; flex-direction: column; gap: .32rem; text-align: left; } .contact-form__field label{ font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: var(--off-white-soft); text-shadow: 0 1px 4px rgba(0,0,0,.6); } .contact-form__field input, .contact-form__field textarea, .contact-form__field select{ width: 100%; border: 0; outline: 0; border-radius: 10px; background: var(--off-white); color: var(--black); font-family: var(--font-body); font-size: 1rem; padding: .75rem .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: box-shadow .2s var(--ease); } .contact-form__field textarea{ min-height: 6.5rem; resize: vertical; line-height: 1.4; } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder{ color: #7a7168; } /* Survol : léger raffermissement de l'ombre, discret (le clavier reste le parcours principal — voir :focus-visible juste après pour l'état net). */ .contact-form__field input:hover, .contact-form__field textarea:hover, .contact-form__field select:hover{ box-shadow: 0 6px 20px rgba(0,0,0,.42); } .contact-form__field input:focus-visible, .contact-form__field textarea:focus-visible, .contact-form__field select:focus-visible{ box-shadow: 0 0 0 3px rgba(255,138,61,.55), 0 6px 20px rgba(0,0,0,.3); } /* Validation temps réel (voir js/main.js) : liseré rouge sur un champ invalide, posé uniquement après un premier passage (aria-invalid n'est basculé sur "true" qu'au blur), jamais dès la première frappe. */ .contact-form__field input[aria-invalid="true"]{ box-shadow: 0 0 0 2px var(--orange-fire), 0 6px 20px rgba(0,0,0,.3); } .contact-form__error{ min-height: 1em; font-size: .72rem; line-height: 1.3; color: var(--orange-glow); text-shadow: 0 1px 4px rgba(0,0,0,.6); } /* reste la source de vérité (JS le lit directement) — seul l'habillage visuel change. */ .cookie-switch{ position: relative; display: inline-block; width: 2.6rem; height: 1.5rem; flex: 0 0 auto; } .cookie-switch input{ position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .cookie-switch__track{ position: absolute; inset: 0; background: rgba(239,230,216,.2); border-radius: 999px; transition: background .2s var(--ease); pointer-events: none; } .cookie-switch__track::before{ content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.14rem; height: 1.14rem; border-radius: 50%; background: var(--off-white); transition: transform .2s var(--ease); } .cookie-switch input:checked + .cookie-switch__track{ background: var(--red-primary); } .cookie-switch input:checked + .cookie-switch__track::before{ transform: translateX(1.1rem); } .cookie-switch input:focus-visible + .cookie-switch__track{ outline: 2px solid var(--orange-fire); outline-offset: 2px; } .cookie-switch input:disabled + .cookie-switch__track{ opacity: .5; cursor: default; } .cookie-modal__actions{ display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(239,230,216,.1); } @media (max-width: 480px){ .cookie-modal__actions{ flex-direction: column-reverse; } .cookie-modal__actions .cookie-btn{ width: 100%; text-align: center; } } /* ---------- Page /gestion-cookies.html : mêmes blocs que la modale mais posés à même le corps de page (voir .page__body), pas en superposition. ---------- */ .cookie-settings__actions{ display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0; } .cookie-settings__status{ margin: 0 0 1.6rem; padding: .85rem 1.1rem; border-radius: 10px; background: rgba(239,230,216,.06); border: 1px solid rgba(239,230,216,.12); font-size: .85rem; color: rgba(239,230,216,.75); } /* ========================================================================== FIL D'ARIANE — pages secondaires (mentions légales, CGV, confidentialité, gestion des cookies). Maillage interne vers l'accueil + repère de navigation ; posé en JSON-LD (BreadcrumbList) en plus du HTML visible. ========================================================================== */ .breadcrumb{ margin: 0 0 1.4rem; } .breadcrumb ol{ display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: .78rem; color: rgba(239,230,216,.55); } .breadcrumb li{ display: flex; align-items: center; } .breadcrumb li:not(:last-child)::after{ content: "/"; margin: 0 .5rem; color: rgba(239,230,216,.3); } .breadcrumb a{ color: rgba(239,230,216,.75); text-decoration: underline; text-underline-offset: .15em; } .breadcrumb a:hover, .breadcrumb a:focus-visible{ color: var(--orange-glow); }