/* ========================================================= Maison Nomade, site de prospection Cinq écrans, aucun défilement vertical, deux thèmes complets. Jetons repris du design system Maison Nomade. ========================================================= */ /* --------------------------------------------------------- Plus Jakarta Sans, auto-hébergée. Aucune requête vers Google : c'est ce qui permet de retirer fonts.googleapis.com de style-src et fonts.gstatic.com de font-src dans la CSP. Les unicode-range viennent de la feuille servie par Google, ils ne sont pas devinés : le navigateur ne télécharge latin-ext que si la page contient réellement un caractère de cette plage. Six graisses, les seules déclarées dans ce fichier. --------------------------------------------------------- */ /* latin */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* latin-ext */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* latin */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* latin-ext */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* latin */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* latin-ext */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* latin */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* latin-ext */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* latin */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* latin-ext */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* latin */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* latin-ext */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/plus-jakarta-sans-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} :root{ --bg:#0C0B09; --surface:#141310; --surface-2:#171613; --line-faint:#1C1B17; --line:#26251F; --line-2:#2C2B25; --line-3:#37352E; --ink:#F7F6F2; --on-ink:#141310; --text:#D6D3CB; --t2:#A8A59C; --t3:#9A978E; --t4:#8B8880; --t5:#858279; --field:#141310; --nav-bg:rgba(12,11,9,.82); --shadow:0 22px 60px rgba(0,0,0,.5); /* Geometrie de la colonne, source unique : la barre, les ecrans et le panneau les partagent, et le bandeau de preuve s'en sert pour calculer de combien il deborde vers la droite. */ --pane-max:1180px; --marge-ecran:clamp(16px,4vw,54px); --nav-pad:clamp(14px,3vw,26px); --veil:linear-gradient(180deg,rgba(12,11,9,.72) 0%,rgba(12,11,9,.42) 38%,rgba(12,11,9,.9) 100%); --glow:radial-gradient(78% 58% at 50% 30%,rgba(226,110,74,.42) 0%,rgba(176,82,46,.18) 42%,rgba(12,11,9,0) 74%); --slot:#1B1A16; --ambre:#FFAC35; --terracotta:#E26E4A; --bleu-sig:#2E7FD4; --rose:#F28DD2; --gradient:linear-gradient(160deg,var(--ambre) 0%,var(--terracotta) 32%,var(--bleu-sig) 64%,var(--rose) 100%); /* Une seule couleur d'accent sur tout le site. */ --accent:#E26E4A; /* L'accent tel quel ne porte pas de petit texte clair : #F7F6F2 sur #E26E4A ne donne que 2,96:1 en sombre et 4,05:1 en clair, pour un seuil de 4,5. Cette variante assombrie a teinte constante atteint 4,52:1. Elle ne sert que de FOND derriere du texte, jamais de couleur de trait. */ --accent-fond:#C5471F; /* Meme probleme dans l'autre sens : en theme clair, --accent ne donne que 4,05:1 sur le fond de page et 4,38:1 sur une carte blanche. Ce jeton porte l'accent QUAND IL EST DU TEXTE. Le contraste etant symetrique, c'est la variante assombrie qui convient, la meme que pour les fonds. */ --accent-txt:var(--accent); --rule:var(--accent); --warn:#FFAC35; /* bandeau d'état du billet */ --warn-fond:rgba(255,172,53,.14); --hover:rgba(247,246,242,.06); /* Police relevée sur le gabarit : géométrique, ronde, 'a' à un étage. */ --f-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif; --f-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif; --nav-h:66px; --ease:cubic-bezier(.22,.61,.36,1); --sortie:cubic-bezier(.16,1,.3,1); /* décélération longue, sans rebond */ } /* Le theme suit le systeme : clair le jour, sombre la nuit, sans bouton. :root est sombre par defaut ; cette media query passe en clair quand le terminal est en clair. */ @media (prefers-color-scheme: light){ :root{ --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#EFEDE7; --line-faint:#E7E5DE; --line:#D6D3CB; --line-2:#D6D3CB; --line-3:#C7C4BB; --ink:#1E1D1A; --on-ink:#F7F6F2; --text:#312F29; --t2:#4A473F; --t3:#4E4B43; --t4:#5F5C53; --t5:#6F6C63; --field:#FFFFFF; --nav-bg:rgba(247,246,242,.9); --shadow:0 16px 40px rgba(30,29,26,.1); --veil:linear-gradient(180deg,rgba(247,246,242,.7) 0%,rgba(247,246,242,.5) 38%,rgba(247,246,242,.94) 100%); --glow:radial-gradient(62% 46% at 62% 34%,rgba(226,110,74,.085) 0%,rgba(226,110,74,.03) 46%,rgba(247,246,242,0) 74%); --slot:#E4E2DA; --accent:#C25A2E; --accent-fond:#B4542B; /* 4,58:1 avec #F7F6F2, 4,98:1 avec #FFFFFF */ --accent-txt:#B4542B; --rule:var(--accent); --warn:#8F5307; --warn-fond:rgba(255,172,53,.2); --hover:rgba(30,29,26,.05); } } *{box-sizing:border-box} html,body{height:100%;margin:0;overflow:hidden} body{ background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:14.5px; line-height:1.62; -webkit-font-smoothing:antialiased; } /* Le temps d'une image, plus rien ne transite : le thème bascule d'un bloc. */ .bascule, .bascule *, .bascule *::before, .bascule *::after{ transition:none !important; animation-play-state:paused !important; } button,input{font:inherit;color:inherit} input::placeholder{color:var(--t5)} /* Anneau a deux couches : le bleu seul tombait a 1,29:1 sur une pastille active, la ou il tient a 4,78:1 sur le fond de page. Un focalisable dont le fond peut changer de couleur exige un anneau qui ne depend d'aucun fond : trait clair a l'interieur, trait sombre a l'exterieur. */ :focus-visible{ outline:2px solid var(--bleu-sig);outline-offset:3px;border-radius:4px; box-shadow:0 0 0 1px #F7F6F2, 0 0 0 5px #0C0B09; } .skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--on-ink);padding:10px 16px} /* Lu par les lecteurs d'ecran, jamais peint. Ni display:none ni hidden, qui le sortiraient aussi de l'arbre d'accessibilite. */ .hors-champ{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip:focus{left:12px;top:12px} /* ------------------------- navigation ------------------------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h); display:flex;align-items:center;justify-content:space-between;gap:14px; padding:0 var(--nav-pad); background:var(--nav-bg);backdrop-filter:blur(14px); border-bottom:1px solid var(--line-faint); } .nav-brand{ flex:none;text-decoration:none;display:block; font-family:var(--f-display);font-weight:800; font-size:clamp(16px,1.6vw,23px);line-height:1; letter-spacing:-.01em;text-transform:uppercase; color:var(--ink);white-space:nowrap; } .nom-court{display:none} .nav-actions{display:flex;align-items:center;gap:8px} /* Menu texte au centre, comme le gabarit : chaque libellé nomme un écran, l'écran courant est souligné. */ .menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)} .menu button{ position:relative;background:none;border:0;padding:6px 0;cursor:pointer; font-family:var(--f-display);font-weight:300;font-size:14px;letter-spacing:.01em; color:var(--t2);white-space:nowrap;transition:color 200ms; } .menu button:hover{color:var(--ink)} .menu button::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--rule);transform:scaleX(0);transform-origin:left; transition:transform 320ms var(--ease); } .menu button[aria-current="true"]{color:var(--ink)} .menu button[aria-current="true"]::after{transform:scaleX(1)} /* Sous 860 px, le menu ne tient pas : on nomme l'écran courant. */ .menu-mobile{ display:none;margin:0;align-items:baseline;gap:8px; font-family:var(--f-display);font-weight:300;font-size:13px; letter-spacing:.16em;text-transform:uppercase;color:var(--ink); } .menu-mobile b{font-weight:400;font-size:11px;color:var(--t4)} .icon{ width:38px;height:38px;flex:none;display:grid;place-items:center; border-radius:999px;background:transparent;border:1px solid var(--line-2); color:var(--t2);cursor:pointer;transition:color 200ms,border-color 200ms; } .icon:hover{color:var(--ink);border-color:var(--line-3)} /* Jeu d'icônes Lucide (celui de shadcn/ui) : trait de 2, bouts arrondis. */ .lucide{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .marque{fill:currentColor;stroke:none} .icon svg{width:17px;height:17px} /* Le hamburger n'existe que sous le point de bascule. La regle doit etre plus specifique que .icon, declaree juste au-dessus : a specificite egale c'est la derniere qui gagne, et .icon{display:grid} le rendait visible sur grand ecran, ses deux icones empilees. */ .nav-actions .burger{display:none} /* Etat du hamburger : croix a l'ouverture. Rien a voir avec la largeur, donc hors media query. */ .burger .i-fermer{display:none} body.menu-ouvert .burger .i-menu{display:none} body.menu-ouvert .burger .i-fermer{display:block} /* Toute classe qui pose un display bat la regle navigateur [hidden]{display:none}, de meme specificite mais declaree avant. app.js masquait bien #billets et #dl-form pour les offres sur devis ; .billets{display:grid} et .btn{display:inline-flex} les rallumaient, et le recapitulatif d'une Edition Privee demandait « Comment souhaitez-vous vos billets ? ». */ [hidden]{display:none !important} .btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--f-display);font-weight:400;font-size:13.5px;letter-spacing:.02em; padding:13px 24px;border-radius:999px;border:1px solid transparent;background:transparent; cursor:pointer;text-decoration:none;white-space:nowrap; transition:background 200ms,border-color 200ms,color 200ms; } .btn.sm{padding:10px 18px;font-size:12.5px} .btn.wide{width:100%} .btn-solid{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} /* Aucun etat desactive n'existait : le bouton « Poursuivre » du Partenariat restait opaque, de la meme couleur qu'actif, curseur main, et ne repondait pas au clic sans la moindre explication. */ .btn:disabled, .btn[aria-disabled="true"]{ opacity:.42;cursor:not-allowed; background:var(--surface-2);color:var(--t3);border-color:var(--line-2); } .btn:disabled:hover, .btn[aria-disabled="true"]:hover{background:var(--surface-2);color:var(--t3);border-color:var(--line-2)} .btn-solid:hover{background:var(--rule);border-color:var(--rule);color:#1E1D1A} @media (prefers-color-scheme: light){ .btn-solid:hover{background:var(--accent-fond);border-color:var(--accent-fond);color:#FFFFFF} } .btn-ghost{color:var(--ink);border-color:var(--line-3)} .btn-ghost:hover{border-color:var(--ink)} .btn-cta{ background:var(--ink);color:var(--on-ink);border-color:var(--ink); padding:11px 18px;font-size:13px;font-weight:600; } .en-parcours .btn-cta{opacity:0;pointer-events:none;transform:translateX(8px)} /* Une seule transition, un seul survol. La regle etait ecrite deux fois a l'identique, et un second :hover annulait la couleur du premier. */ .btn-cta{transition:opacity 320ms var(--sortie),transform 420ms var(--sortie),background 200ms,border-color 200ms,color 200ms} .btn-cta:hover{background:var(--rule);border-color:var(--rule);color:var(--on-ink)} .pilote{ position:fixed;right:clamp(16px,4vw,54px);bottom:clamp(16px,3vh,28px);z-index:35; display:flex;align-items:center;gap:10px; } .arrow{ width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:999px; background:var(--nav-bg);backdrop-filter:blur(10px); border:1px solid var(--line-2);color:var(--t2);cursor:pointer; transition:color 220ms,border-color 220ms,opacity 300ms,transform 420ms var(--sortie); } .arrow svg{width:16px;height:16px} .arrow:hover{color:var(--ink);border-color:var(--line-3)} #prev:hover{transform:translateX(-3px)} #next:hover{transform:translateX(3px)} .arrow[disabled]{opacity:.28;pointer-events:none} /* Ecran de contact : deux etats mutuellement exclusifs. Tant que personne n'a compose de demande, tout ce qui parle de recapitulatif disparait. */ body:not(.a-configure) [data-quand="parcours"]{display:none} body.a-configure [data-quand="contact"]{display:none} /* Pied fixe : le deck occupe 100dvh, un pied en flux serait hors ecran. Symetrique du .pilote, cote gauche, pour ne jamais le recouvrir. */ .pied{ position:fixed;left:clamp(16px,4vw,54px);bottom:clamp(16px,3vh,28px);z-index:35; display:flex;align-items:center;gap:8px; font-size:11px;letter-spacing:.04em;color:var(--t2); /* Le pied flotte au-dessus des ecrans : sans cela il intercepte le clic sur le bouton principal quand celui-ci descend jusqu'en bas, ce qui arrive des 667px de haut. Seuls les deux liens restent cliquables, et .screen leur reserve la hauteur en padding pour qu'aucun contenu ne passe dessous. */ pointer-events:none; } .pied a{pointer-events:auto} /* Le copyright n'est pas un lien : il doit se lire comme une mention, un cran en retrait des deux pages legales. */ .pied-c{color:var(--t4)} .pied a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color 220ms,border-color 220ms} .pied a:hover{color:var(--ink);border-bottom-color:var(--line-3)} /* Telephone couche. Masque par defaut, il ne parait que sous les conditions du bas de fichier : orientation paysage, hauteur inferieure a 500px et pointeur grossier. Une fenetre de bureau basse n'y a jamais droit. */ .tourner{display:none} /* ------------------------- pagination ------------------------- */ /* On ne fait pas defiler ce site, on y clique. overflow:hidden interdit le geste de l'utilisateur mais laisse passer scrollTo() : le glissement d'un ecran a l'autre reste anime, il n'est plus declenchable au trackpad. scroll-snap n'a plus d'objet sans geste. */ .deck{ height:100dvh;width:100%; display:flex; overflow:hidden; scroll-behavior:smooth; overscroll-behavior:none; } .screen{ position:relative;flex:0 0 100%;width:100%;height:100dvh; overflow:hidden; display:grid;place-items:center;grid-template-rows:minmax(0,1fr); /* Le bas reserve la bande du pied fixe et des fleches de pilotage. */ padding:calc(var(--nav-h) + 10px) var(--marge-ecran) clamp(46px,6vh,62px); } .pane{width:100%;max-width:var(--pane-max);max-height:100%;min-height:0} /* ------------------------- typographie ------------------------- */ .eyebrow{ margin:0 0 14px;font-family:var(--f-display);font-weight:400; font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t5); } .display{ margin:0;font-family:var(--f-display);font-weight:700; font-size:clamp(30px,5.2vw,66px);line-height:1.02;letter-spacing:-.03em;color:var(--ink); } .display span,.display em{display:block} .display em{font-style:normal;font-weight:700} /* Chaque ligne est masquée par son propre cadre, le texte remonte au travers. */ .display .ligne{overflow:hidden;padding-bottom:.06em} .display .ligne i{ display:block;font-style:normal; transform:translateY(105%); transition:transform 1000ms var(--sortie); } .screen.vu .display .ligne i{transform:translateY(0)} .display .ligne:nth-child(2) i{transition-delay:90ms} .display .ligne:nth-child(3) i{transition-delay:180ms} .title{ margin:0;font-family:var(--f-display);font-weight:700; font-size:clamp(24px,3.5vw,42px);line-height:1.06;letter-spacing:-.03em;color:var(--ink); } .title em{font-style:normal;font-weight:700;color:var(--t2)} .title-s{ margin:0 0 12px;font-family:var(--f-display);font-weight:600; font-size:clamp(20px,2.4vw,26px);line-height:1.12;letter-spacing:-.02em;color:var(--ink); } .slogan{ margin:18px 0 0;font-family:var(--f-display);font-weight:300; font-size:clamp(14px,1.6vw,18px);letter-spacing:.01em;color:var(--t2); } .lede{ margin:14px 0 0;max-width:52ch;color:var(--t3); font-family:var(--f-display);font-weight:300;font-size:15px;line-height:1.6; } .micro{ margin:0;font-family:var(--f-display);font-weight:400; font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t5); } .muted{color:var(--t4)} /* ------------------------- écran 1 ------------------------- */ /* Proportions relevées sur le gabarit Streama (base 1024 px de large) : mur d'affiches 358 px, gouttière 39 px, colonne de texte 477 px, soit 0,75 fr pour 1 fr. Trois colonnes d'affiches, écart 15 px, affiches en 2:3, colonnes décalées verticalement, coupe nette en haut et en bas du cadre. */ #e1{overflow:hidden} #e1 .glow{position:absolute;inset:0;z-index:0;background:var(--glow);pointer-events:none;animation:respire 11s ease-in-out infinite} @keyframes respire{0%,100%{opacity:.78}50%{opacity:1}} .pane-hero{ position:relative;z-index:1; display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:clamp(20px,3.8vw,52px);align-items:center; height:100%;min-height:0; } /* Fondu du gabarit : les affiches naissent du fond en haut, s'éteignent en bas, et se dissolvent vers la colonne de texte à droite. */ .mosaique{ position:relative;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(9px,1.15vw,15px); height:100%;min-height:0;overflow:hidden; perspective:900px;--px:0px;--py:0px; --fondu:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 9%,#000 26%,#000 74%,rgba(0,0,0,.45) 91%,transparent 100%); -webkit-mask-image:var(--fondu);mask-image:var(--fondu); } .colonne{ overflow:hidden;min-height:0; transform:translate3d(calc(var(--px) * var(--d)),calc(var(--py) * var(--d)),0); transition:transform 900ms var(--sortie); } .colonne:nth-child(1){--d:.55} .colonne:nth-child(2){--d:1} .colonne:nth-child(3){--d:.75} /* Le mur s'arrête quand on le regarde, les voisines s'effacent. */ .mosaique:hover .piste{animation-play-state:paused} .mosaique:hover .carte{opacity:.42;filter:saturate(.55)} .mosaique .carte:hover{opacity:1;filter:none} /* Défilement continu. La piste porte deux fois la suite d'affiches, la translation de la moitié exacte referme la boucle sans saut. */ .piste{display:block;animation:defileY linear infinite;will-change:transform} .colonne:nth-child(1) .piste{animation-duration:74s;animation-delay:-11s} .colonne:nth-child(2) .piste{animation-duration:92s;animation-delay:-38s;animation-direction:reverse} .colonne:nth-child(3) .piste{animation-duration:83s;animation-delay:-24s} @keyframes defileY{from{transform:translateY(0)}to{transform:translateY(-50%)}} .carte{ display:block;width:100%;padding:0;cursor:pointer; position:relative;aspect-ratio:2/3;border-radius:5px;overflow:hidden; /* Aucun fond, aucune bordure : --slot et --line-2 dessinaient un rectangle d'une autre teinte que la page, et l'enfilade de ces rectangles se lisait comme un rail dans lequel les affiches coulissaient. Seule l'affiche doit se voir. L'ombre reste, c'est la profondeur du papier, pas un fond. */ background:transparent;border:1px solid transparent; /* Aucune ombre au repos. C'etait elle, le rail : mesuree au pixel, elle assombrissait l'intervalle entre deux affiches de 17 niveaux par rapport au fond de page en theme clair (230,229,225 contre 247,246,242), et le cumul d'une carte a l'autre dessinait une bande continue le long de chaque colonne. Sans elle, l'ecart tombe a zero. L'ombre reste au survol : une seule carte a la fois, c'est un geste, pas un decor. */ margin-bottom:clamp(9px,1.15vw,15px); /* marge, pas gap : la boucle reste exacte */ --tx:0deg;--ty:0deg;transform-style:preserve-3d; transition:opacity 520ms var(--sortie),filter 520ms var(--sortie), transform 420ms var(--sortie),box-shadow 520ms var(--sortie); } .carte:hover{ z-index:3; transform:rotateX(var(--tx)) rotateY(var(--ty)) scale(1.07) translateZ(24px); box-shadow:0 30px 70px rgba(0,0,0,.55); } /* reflet qui suit l'inclinaison */ .carte::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(115deg,rgba(255,255,255,.24),rgba(255,255,255,0) 46%); transition:opacity 520ms var(--sortie); } .carte:hover::before{opacity:1} .carte img{ position:absolute;inset:0;z-index:1; width:100%;height:100%;object-fit:cover;display:block; opacity:0;transform:scale(1.06); animation:affichePrend 1100ms var(--ease) forwards; /* Retard posé par app.js via le CSSOM, exempté de style-src. */ animation-delay:var(--retard,0ms); } @keyframes affichePrend{to{opacity:1;transform:scale(1)}} .carte::after{ content:attr(data-slot);position:absolute;inset:0;z-index:0; display:grid;place-items:center;padding:0 8px;text-align:center; font-family:var(--f-display);font-weight:300;font-size:9.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--t4); } /* grid-template-columns explicite : sans lui la colonne se dimensionne sur le contenu, et tout max-width en pourcentage se resout contre cette largeur-la, pas contre le conteneur. Le chapo et le bandeau de preuve depassaient alors le bord droit a toutes les largeurs. */ .hero-copy{ display:grid;grid-template-columns:minmax(0,1fr); justify-items:start;align-content:center;min-width:0; } /* surtitre suivi d'un filet, comme le « SCROLL ——— » du gabarit */ .kicker{ display:flex;align-items:center;gap:16px;margin:0 0 22px; font-family:var(--f-display);font-weight:400;font-size:10.5px; letter-spacing:.28em;text-transform:uppercase;color:var(--t3); } .kicker i{display:block;width:clamp(44px,6vw,76px);height:1px;background:var(--t5)} .pane-hero .display{ font-weight:700;font-size:clamp(30px,4.7vw,64px); line-height:1.02;letter-spacing:-.03em; } .pane-hero .lede{margin:26px 0 0;max-width:46ch;line-height:1.62} /* Le mur montre des films sous droits : la mention ne peut pas attendre qu'on ouvre une fiche pour se lire. */ .pane-hero .slogan{margin:26px 0 0;font-size:13.5px;color:var(--t3)} .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3.4vh,34px)} .btn .g{ display:inline-grid;place-items:center;width:20px;height:20px;margin-left:10px; border-radius:999px;border:1px solid currentColor;opacity:.7; transition:transform 420ms var(--sortie),opacity 260ms; } .btn .g svg{width:11px;height:11px} .btn:hover .g{opacity:1;transform:translateX(3px)} .btn-ghost:hover .g{transform:rotate(90deg)} .marquee{ overflow:hidden;width:100%;min-width:0;max-width:100%; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent); mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent); } /* Marge et non gap : un gap n'existe qu'ENTRE deux enfants, jamais apres le dernier, donc la premiere moitie de la piste depasse la demi-largeur de gap/2 et translateX(-50%) saute de 20 px a chaque boucle. Le mur vertical avait deja tranche ce point, la regle n'avait pas ete reportee ici. */ .marquee-track{ display:flex;align-items:center;width:max-content; animation:defile 60s linear infinite; } /* Les logos sont blancs sur canevas transparent de hauteur commune : une seule hauteur suffit, chacun garde le poids optique fige a la fabrication. */ .marquee-track img{ height:clamp(26px,3.2vw,34px);width:auto;flex:none;display:block; margin-right:clamp(20px,3.4vw,40px); opacity:.5;transition:opacity 320ms var(--sortie); } .marquee:hover .marquee-track img{opacity:.72} @media (prefers-color-scheme: light){ .marquee-track img{filter:invert(1);opacity:.55} .marquee:hover .marquee-track img{opacity:.78} } @keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Bandeau de preuve sous le hero. Plus petit et plus lent que celui de l'ecran contact : il accompagne le titre, il ne lui dispute pas le regard. */ /* width:100% ancre la largeur sur la zone de grille : sans lui, un enfant aligne en start prend son max-width et deborde la zone au lieu d'y tenir. */ /* Le bandeau part du bord droit de l'ecran, aligne sur la fin du bouton « Parler a l'equipe », et se termine la ou finit la colonne de texte. Il deborde donc sa zone de grille vers la droite : la marge negative vaut la distance entre le bord du panneau et celui de la fenetre, moins la marge de la barre. justify-self:stretch est indispensable, sans lui l'element est dimensionne sur son contenu et la marge ne l'etire pas. */ .preuve{ margin-top:clamp(14px,2.4vh,24px); justify-self:stretch;width:auto;max-width:none; margin-right:calc( var(--nav-pad) - (100vw - min(var(--pane-max), 100vw - 2 * var(--marge-ecran))) / 2 ); } .preuve-t{ margin:0 0 8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--t4); } /* Fondu des deux cotes : les logos n'apparaissent ni ne disparaissent net. */ .marquee-mini{ --fondu-x:linear-gradient(90deg,transparent 0,#000 9%,#000 88%,transparent 100%); -webkit-mask-image:var(--fondu-x);mask-image:var(--fondu-x); } .marquee-mini .marquee-track{animation-duration:78s} .marquee-mini .marquee-track img{height:clamp(18px,2vw,22px);opacity:.42;margin-right:clamp(16px,2.4vw,28px)} .marquee-mini:hover .marquee-track img{opacity:.62} @media (prefers-color-scheme: light){ .marquee-mini .marquee-track img{opacity:.48} .marquee-mini:hover .marquee-track img{opacity:.68} } /* ------------------------- écran 2 ------------------------- */ .offres{ /* Quatre formules sur une seule rangee : l'ecran fait 100vh, une seconde rangee deborderait. Le padding des cartes est deja en clamp(). */ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,18px); /* Six rangees partagees : numero, etiquette, nom, description, prix, action. Les cartes s'y accrochent en subgrid, donc le filet du prix et le libelle tombent a la meme hauteur sur les quatre, quelle que soit la longueur de la description. Sans cela le filet du Partenariat remontait de 20,9 px. */ grid-template-rows:auto auto auto 1fr auto auto; margin-top:clamp(20px,3vh,34px); } .offre{ position:relative;overflow:hidden; /* align-content:start empilait simplement les enfants : la description du Partenariat tient sur deux lignes contre trois ailleurs, et le filet du prix se posait 20,9 px plus haut sur cette carte. La description prend desormais la place restante, les quatre filets et les quatre libelles tombent sur la meme ligne. */ display:grid;gap:8px;text-align:left; grid-row:span 6;grid-template-rows:subgrid; padding:clamp(18px,2.2vw,26px); background:var(--surface);border:1px solid var(--line-2);border-radius:8px; cursor:pointer; transition:transform 620ms var(--sortie),border-color 320ms,box-shadow 620ms var(--sortie); } .offre::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--accent); transform:scaleX(0);transform-origin:left; transition:transform 620ms var(--sortie); } .offre:hover{transform:translateY(-8px);box-shadow:var(--shadow)} .offre:hover::before{transform:scaleX(1)} /* Le selecteur etait « .offre @supports … », invalide : l'analyseur jetait le bloc entier et le repli n'a jamais existe. Verifie dans le CSSOM. */ @supports not (grid-template-rows: subgrid){ .offre{grid-row:auto;grid-template-rows:auto auto auto 1fr auto auto} } .offre-go{transition:transform 420ms var(--sortie),color 260ms} .offre:hover .offre-go{transform:translateX(5px);color:var(--ink)} .offre:hover{border-color:var(--accent)} .offre-num{font-family:var(--f-display);font-size:10.5px;letter-spacing:.26em;color:var(--t5)} .offre-tag{ font-family:var(--f-display);font-weight:400;font-size:10px; letter-spacing:.3em;text-transform:uppercase; } .offre-tag{color:var(--accent-txt)} /* 300 et non 200 : la graisse 200 n'a jamais ete chargee. L'algorithme de correspondance CSS remontait deja au 300, seule face disponible sous 400. Mesure du 2026-08-09 : captures identiques au pixel pres, largeur d'encre 394,453 px dans les deux cas (le 400 donne 396,141 px). Ecrire 300 ne change donc rien au rendu, et evite d'embarquer un fichier de plus. */ .offre-nom{font-family:var(--f-display);font-weight:300;font-size:clamp(20px,2.4vw,29px);line-height:1.14;color:var(--ink)} .offre-cible{font-size:13.5px;line-height:1.55;color:var(--t3);margin-top:2px} .offre-prix{ margin-top:12px;padding-top:12px;border-top:1px solid var(--line-faint); font-family:var(--f-display);font-weight:500;font-size:14px;line-height:1.45;color:var(--ink); /* Graisse 500 et couleur d'encre : le montant est l'information de decision de la carte, il etait compose dans la graisse la plus legere du site, plus maigre que la description qui le precede. L'alignement des filets entre cartes est traite par la sous-grille de .offres, pas par une hauteur reservee ici, qui ajoutait 37px a l'ecran. */ } .offre-go{ font-family:var(--f-display);font-weight:400;font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--t2); } .offre-go::after{content:" →"} /* Le detail d'une formule, second temps du meme ecran. Il occupe la place de la liste : deux vues, jamais deux hauteurs empilees, donc jamais de defilement. */ /* Les deux temps etaient centres chacun sur SA hauteur : le bloc sautait de 42,6 px a l'ouverture d'une formule. Les ancrer en haut supprimait le saut mais laissait un vide de 400 px sous les cartes sur 1440 x 900. Chaque temps occupe donc toute la hauteur du volet et centre son contenu dedans : meme boite pour les deux, donc aucun saut, et rien qui pende en haut de l'ecran. */ .pane-formules{display:flex;flex-direction:column;align-self:stretch;height:100%;max-height:100%} .formules-vue{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center} .detail-tete{max-width:70ch} .detail-tete .eyebrow{margin:12px 0 6px} .detail-tete .title-s{margin:0;font-size:clamp(22px,2.6vw,31px);font-weight:300} .detail-tete .lede{margin-top:10px} /* .lien repose border-bottom plus bas, a specificite egale : il gagnait par ordre d'apparition. Une classe de plus tranche sans deplacer le bloc. */ .lien.lien-retour{display:inline-flex;align-items:center;gap:7px;border-bottom:0;min-height:44px} .lien-retour .lucide{width:15px;height:15px} .lien-retour:hover{color:var(--ink)} /* min-height:0 autorisait ce bloc a se comprimer sous la hauteur de son contenu dans la colonne flex : sur 375 px, la note des trois niveaux se peignait par-dessus la ligne de prix, les deux textes superposes. Il garde desormais sa hauteur, l'ecran tient sans cela. */ .detail-corps{margin-top:clamp(16px,2.6vh,26px);flex:none} .detail-inclus{ margin:0;padding:0;list-style:none; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.8vh,18px) clamp(18px,3vw,40px); } .detail-inclus li{ padding-left:20px;position:relative; font-size:14px;line-height:1.6;color:var(--t3); } .detail-inclus li::before{ content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent); } /* Les trois niveaux de Partenariat, cote a cote et comparables. */ .detail-niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px)} .detail-niveau{ display:grid;gap:6px;align-content:start; padding:clamp(14px,1.8vw,20px); background:var(--surface);border:1px solid var(--line-2);border-radius:8px; } .detail-niveau b{font-family:var(--f-display);font-weight:400;font-size:17px;color:var(--ink)} .detail-niveau-prix{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--accent-txt)} .detail-niveau em{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--t4)} .detail-niveau ul{ margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px; padding-top:10px;border-top:1px solid var(--line-faint); } .detail-niveau li{font-size:12.5px;line-height:1.5;color:var(--t3)} .detail-suite{display:none} @media (max-width:860px){ .detail-niveaux{grid-template-columns:1fr;gap:8px} .detail-niveau{grid-template-columns:1fr auto;align-items:baseline;padding:12px 14px;gap:4px 10px} .detail-niveau em{grid-column:1 / -1} .detail-niveau ul{display:none} .detail-suite{display:block;margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--t4)} .detail-inclus{grid-template-columns:1fr} } .detail-pied{ margin-top:clamp(16px,2.6vh,26px);flex:none; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; } .detail-prix{ margin:0;font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--ink); } .soiree-suite{display:flex} /* ------------------------- écran 4 ------------------------- */ .pane-config{display:flex;flex-direction:column;justify-content:center;align-self:stretch;height:100%;max-height:100%} .config-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex:none} .config-head .eyebrow{margin:0 0 6px} .config-head .title-s{margin:0} .segmented{display:none;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px} .segmented button{ border:0;background:transparent;border-radius:999px;padding:8px 16px;cursor:pointer; font-family:var(--f-display);font-size:12.5px;color:var(--t3); } .segmented button[aria-selected="true"]{background:var(--surface-2);color:var(--ink)} .config-grid{ flex:1;min-height:0;margin-top:10px; display:grid;grid-template-columns:1fr .82fr;gap:clamp(18px,3vw,44px); } .col{min-height:0;display:flex;flex-direction:column} .col-form{gap:clamp(8px,1.3vh,14px)} /* Une étape, une question posée en clair. */ .etape{display:grid;gap:9px} .etape[hidden]{display:none} .etape-q{ display:flex;align-items:baseline;gap:10px;margin:0; font-family:var(--f-display);font-weight:600;font-size:15.5px; letter-spacing:-.01em;line-height:1.3;color:var(--ink); } .etape-q b{font-weight:700} .etape-q span{ flex:none;font-weight:600;font-size:10.5px;letter-spacing:.14em; color:var(--accent-txt);padding-top:3px; } .etape-aide{margin:0;font-size:12.5px;line-height:1.5;color:var(--t4)} .stepper{ display:flex;align-items:center;gap:6px;justify-self:start; padding:6px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface); } .stepper input{ width:78px;text-align:center;background:transparent;border:0; font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3.2vw,34px); letter-spacing:-.03em;line-height:1;color:var(--ink);padding:0; } .stepper .icon{width:34px;height:34px;border-color:transparent;background:var(--surface-2)} .stepper .icon:hover{background:var(--accent-fond);color:#F7F6F2;border-color:transparent} .stepper .icon svg{width:15px;height:15px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips button{ padding:9px 15px;border-radius:999px;background:transparent; border:1px solid var(--line-2);color:var(--t3);cursor:pointer; font-family:var(--f-display);font-size:12.5px; /* transition:all animait outline et box-shadow : l'anneau de focus mettait 400 ms a atteindre son etat final, invisible en tabulation rapide. */ transition:background-color 200ms,border-color 200ms,color 200ms; } .chips button:hover{border-color:var(--line-3);color:var(--ink)} .chips button.on{background:var(--accent-fond);border-color:var(--accent-fond);color:#F7F6F2} .picks{display:grid;grid-template-columns:1fr 1fr;gap:8px} .picks button{ display:grid;gap:3px;text-align:left;padding:11px 14px;border-radius:6px; background:var(--surface);border:1px solid var(--line-2);cursor:pointer;transition:border-color 200ms; } .picks button:hover{border-color:var(--line-3)} .picks button.on{border-color:var(--accent)} .picks b{font-family:var(--f-display);font-weight:400;font-size:16px;color:var(--ink)} .picks span{font-family:var(--f-display);font-weight:300;font-size:14px;color:var(--text)} .picks em{font-style:normal;font-size:11.5px;line-height:1.4;color:var(--t4)} .devis{display:grid;gap:8px;padding:16px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:6px} .devis p{margin:0;font-size:14px;line-height:1.6} .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--f-display);font-size:14px;color:var(--ink)} .switch input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer} /* Le choix d'une rangee n'a plus de sens au-dela de huit invites. */ .switch.indispo{opacity:.45;cursor:not-allowed} .switch.indispo input{cursor:not-allowed} .salle{display:grid;gap:8px} .salle[hidden]{display:none} .ecran-salle{ height:16px;display:grid;place-items:center;border-radius:3px; background:linear-gradient(180deg,var(--line-2),transparent); font-family:var(--f-display);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--t5); } /* Plan de salle : cinq rangees de huit places, la rangee A face a l'ecran. Ni defilement interne, ni retour a la ligne : les huit sieges d'un rang se partagent la largeur disponible, quelle qu'elle soit. Le nombre de colonnes suit CFG.parRangee dans app.js, les deux valeurs se lisent ensemble. */ .plan{display:grid;gap:4px} .plan-rang{display:grid;grid-template-columns:11px repeat(8,minmax(0,1fr));gap:4px;align-items:center} .rang-nom{font-family:var(--f-display);font-size:9px;line-height:1;letter-spacing:.06em; color:var(--t5);text-align:center} /* Le siege ne porte pas son code : a huit par rang sur 375 px, il serait illisible. Le code vit dans l'aria-label et dans l'apercu du billet. */ .siege{ height:20px;min-width:0;padding:0;border-radius:3px 3px 5px 5px; background:transparent;border:1px solid var(--line-2);cursor:pointer; transition:background-color 180ms,border-color 180ms,opacity 180ms; } .siege:hover{border-color:var(--line-3);background:var(--surface)} .siege.on{border-color:var(--accent);background:var(--accent)} /* Place deja demandee pour cette edition : elle s'eteint et ne se clique plus. C'est un indicateur, pas une reservation, le reglement se fait hors ligne. */ .siege.prise{ border-color:var(--line-faint);background:var(--line-faint); opacity:.45;cursor:not-allowed; } .siege.prise:hover{border-color:var(--line-faint);background:var(--line-faint)} /* Les deux premiers rangs tenus pour les invites VVIP : trait pointille, pour ne pas les confondre avec une place deja demandee, qui est pleine. */ .siege.vvip{border-style:dashed;border-color:var(--line-2);background:transparent;cursor:not-allowed} .siege.vvip:hover{border-color:var(--line-2);background:transparent} /* Fenetre basse, souris comprise : cinq rangs de sieges poussaient « Poursuivre » sous le pied de page, qui lui prenait le clic sur 1280 x 720. Le plan se resserre, il ne deborde pas. */ @media (max-height:800px){ .plan{gap:3px} .plan-rang{gap:3px} .siege{height:16px} .salle{gap:6px} .ecran-salle{height:12px} } .recap{ margin-top:auto;padding:12px 15px;border-radius:10px; background:var(--surface);border:1px solid var(--line-2); display:grid;gap:7px;font-size:13.5px; } .recap div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;color:var(--t3)} .recap div b{font-family:var(--f-display);font-weight:500;color:var(--text)} .recap .total{padding-top:9px;border-top:1px solid var(--line-faint);color:var(--ink)} .recap .total span{font-weight:500;color:var(--ink)} .recap .total b{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,2.6vw,26px);letter-spacing:-.02em} .recap-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--t4)} /* -------- billet -------- */ .col-ticket{justify-content:center} .ticket-wrap{display:grid;gap:10px;justify-items:center;min-height:0} .ticket-wrap[hidden]{display:none} .ticket-sur{ margin:0;font-family:var(--f-display);font-weight:500;font-size:10px; letter-spacing:.24em;text-transform:uppercase;color:var(--t5); } .ticket{ position:relative;width:100%;max-width:340px; background:var(--surface);border:1px solid var(--line-2);border-radius:8px; box-shadow:var(--shadow);overflow:hidden; } .ticket::after{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent); } .ticket-top{ display:flex;align-items:center;gap:8px; padding:12px 16px;border-bottom:1px dashed var(--line-2); } .ticket-brand{ flex:1;font-family:var(--f-display);font-weight:700;font-size:12px; letter-spacing:-.01em;text-transform:uppercase;color:var(--ink); } .ticket-etat{ font-family:var(--f-display);font-size:9px;letter-spacing:.16em;text-transform:uppercase; padding:5px 9px;border-radius:999px;background:var(--warn-fond);color:var(--warn);white-space:nowrap; } .ticket-body{padding:16px} .ticket-offre{margin:0 0 12px;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink)} .ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px} .ticket-grid span{ display:block;font-family:var(--f-display);font-size:9px; letter-spacing:.24em;text-transform:uppercase;color:var(--t5); } .ticket-grid b{font-family:var(--f-display);font-weight:400;font-size:15px;color:var(--text)} .ticket-lieu{ margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-faint); font-family:var(--f-display);font-weight:300;font-style:italic;font-size:13px;color:var(--t3); } .ticket-foot{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px dashed var(--line-2)} .qr{width:58px;height:58px;flex:none;border-radius:3px;background:var(--surface-2);padding:4px} .qr svg{width:100%;height:100%;display:block} .ticket-serie{display:grid;gap:2px;min-width:0} .ticket-serie>span:first-child{font-family:var(--f-display);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--t5)} .ticket-serie b{font-family:var(--f-display);font-weight:400;font-size:14px;letter-spacing:.06em;color:var(--text)} .ticket-serie .micro{letter-spacing:.02em;text-transform:none;font-size:10.5px;color:var(--t5)} .ticket-note{ margin:0;text-align:center;font-family:var(--f-display);font-weight:400; font-size:11.5px;letter-spacing:.04em;color:var(--t2); } /* ------------------------- écran 5 ------------------------- */ .pane-contact{max-width:var(--pane-max)} .contact-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(24px,4vw,64px);align-items:center} /* Écran 6, Votre demande : récap à gauche, billets + actions à droite. */ .pane-demande{max-width:var(--pane-max)} .demande-grid{ display:grid;grid-template-columns:1fr .92fr;gap:clamp(24px,4vw,56px); align-items:start;margin-top:clamp(18px,3vh,30px); } .demande-recap .resume{margin-top:0} .demande-liens{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px} .demande-actions{display:grid;gap:12px;align-content:start} .billets{ padding:16px 18px;background:var(--surface); border:1px solid var(--line-2);border-radius:8px;display:grid;gap:10px; } .billets-q{font-family:var(--f-display);font-size:14px;color:var(--t2)} .billets #mode-billet button{flex:1} .billets .etape-aide{margin-top:2px} @media (max-width:860px){ /* La demande tient en une colonne et doit tenir dans la hauteur : sans defilement, la mention legale du bas etait purement et simplement perdue. */ .demande-grid{grid-template-columns:1fr;gap:12px;margin-top:12px} .demande-liens{margin-top:9px;gap:4px 14px} .demande-actions{gap:8px} .billets{padding:11px 13px;gap:7px} .billets-q{font-size:13px} .billets .etape-aide{margin-top:0} .pane-demande .resume{padding:11px 13px;gap:5px} .pane-demande .legal{font-size:9.5px;line-height:1.32} } @media (max-width:860px) and (max-height:720px){ .demande-grid{gap:9px;margin-top:8px} .demande-liens{margin-top:7px} .billets{padding:9px 11px;gap:6px} .billets-q{font-size:12px} .demande-actions .btn{padding:9px 15px} .pane-demande .resume{padding:9px 11px;gap:4px} .pane-demande .resume-total b{font-size:17px} .pane-demande .legal{font-size:9px;line-height:1.28} .pane-demande .lien{font-size:10.5px} } .contact-a{display:grid;align-content:center;gap:0} .contact-a .lede{margin-top:14px;max-width:44ch} .resume{ margin-top:clamp(18px,3vh,28px);padding:18px 20px; background:var(--surface);border:1px solid var(--line-2);border-radius:8px; display:grid;gap:9px; } .resume-l{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .resume-l span{ font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--t5); } .resume-l b{font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--text);text-align:right} .resume-total{padding-top:9px;border-top:1px solid var(--line-faint)} .resume-total b{font-weight:700;font-size:20px;color:var(--ink)} .lien{ justify-self:start;margin-top:2px;padding:0;background:none;border:0;cursor:pointer; font-family:var(--f-display);font-size:12px;color:var(--t3); border-bottom:1px solid var(--line-3);transition:color 220ms,border-color 220ms; } .lien:hover{color:var(--ink);border-color:var(--ink)} .joindre{margin-top:clamp(16px,2.6vh,24px)} .joindre .micro{margin-bottom:8px} .joindre-l{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:12px 0;border-top:1px solid var(--line-faint);text-decoration:none; transition:transform 420ms var(--sortie); } /* transform plutot que padding-left : le meme decalage sans recalcul de mise en page a chaque image. */ .joindre-l:hover{transform:translateX(6px)} .joindre-l span{font-family:var(--f-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--t4)} .joindre-l b{font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--ink)} .contact-b{display:grid;gap:11px;align-content:center} .champ{display:grid;gap:6px} .champ label{ font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--t5); } .champ input{ padding:12px 14px;border-radius:8px;background:var(--field); border:1px solid var(--line-2);color:var(--ink);font-size:14px; transition:border-color 260ms,background 260ms; } /* outline:none ecrasait le :focus-visible global : ces quatre champs etaient les seuls focalisables du site sans anneau. */ .champ input:focus{border-color:var(--bleu-sig)} .contact-actions{display:grid;gap:8px;margin-top:6px} /* Le recapitulatif etait atteignable sans aucun moyen de rappel. */ .contact-requis{margin:0;color:var(--t4)} /* Accuse de reception, a la place de la mention de pre-reservation. */ .accuse{color:var(--ink);font-size:11px;letter-spacing:.02em;text-transform:none;line-height:1.5} .accuse[hidden]{display:none} .contact-requis[hidden]{display:none} .legal{letter-spacing:.02em;text-transform:none;font-size:11px;line-height:1.5;color:var(--t5)} /* ------------------------- mouvement ------------------------- */ /* Entrées en cascade, rejouées à chaque passage sur l'écran. */ .anim{ opacity:0;transform:translateY(22px); transition:opacity 900ms var(--sortie),transform 900ms var(--sortie); will-change:opacity,transform; } .screen.vu .anim{opacity:1;transform:none} /* Le billet accuse chaque changement de configuration. */ @keyframes battement{ 0%{transform:translateY(0) scale(1)} 38%{transform:translateY(-3px) scale(1.012)} 100%{transform:translateY(0) scale(1)} } .ticket.bat{animation:battement 460ms var(--ease)} /* L'affiche survolée se rapproche. */ .carte img{transition:transform 900ms var(--sortie)} .carte:hover img{transform:scale(1.04)} /* Le total se met à jour en roulant. */ .recap .total b{display:inline-block;transition:transform 320ms var(--ease)} .recap .total.roule b{animation:roule 420ms var(--ease)} @keyframes roule{ 0%{transform:translateY(0);opacity:1} 45%{transform:translateY(-9px);opacity:0} 46%{transform:translateY(9px)} 100%{transform:translateY(0);opacity:1} } /* Le filet du surtitre se déploie. */ .screen.vu .kicker i{animation:filet 900ms var(--ease) 240ms both} @keyframes filet{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}} /* ------------------------- écran 3, blocs par offre ------------------------- */ .config-head-actions{display:flex;align-items:center;gap:14px} .lien-inline{margin-left:8px;font-size:11px} /* Partenariat : le choix du niveau, puis son contenu. */ .niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .niveaux button{ display:grid;align-content:start;gap:4px;text-align:left;padding:14px; background:var(--surface);border:1px solid var(--line-2);border-radius:10px; cursor:pointer;transition:border-color 260ms,transform 460ms var(--sortie); } .niveaux button:hover{border-color:var(--line-3);transform:translateY(-3px)} .niveaux button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .niveaux b{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink)} .niveaux span{font-family:var(--f-display);font-weight:500;font-size:13.5px;color:var(--accent-txt)} .niveaux em{font-style:normal;font-size:12px;line-height:1.45;color:var(--t4);margin-top:4px} .inclus{margin:0;padding:0;list-style:none;display:grid;gap:8px} .inclus li{ position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--t3); } .inclus li::before{ content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;border-radius:2px; border:1.5px solid var(--accent); } /* Aperçu : présence de marque */ .apercu{display:grid;gap:10px;justify-items:center;width:100%;min-height:0} .apercu[hidden]{display:none} .marque-carte,.devis-carte{ width:100%;max-width:360px;padding:18px;border-radius:12px; background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow); } .marque-ecran{ height:74px;display:grid;place-items:center;border-radius:6px;margin-bottom:14px; background:var(--surface-2);border:1px dashed var(--line-3); } .marque-ecran span{ font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--t4); } .marque-niveau{ margin:0 0 10px;font-family:var(--f-display);font-weight:700;font-size:19px; letter-spacing:-.02em;color:var(--ink); } .marque-liste{margin:0;padding:0;list-style:none;display:grid;gap:6px} .marque-liste li{ position:relative;padding-left:18px;font-size:12.5px;line-height:1.45;color:var(--t3); } .marque-liste li::before{ content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:999px; background:var(--accent); } .marque-pied{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-top:14px;padding-top:12px;border-top:1px solid var(--line-faint); } .marque-pied span{ font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--t5); } .marque-pied b{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ink)} /* Aperçu : demande de devis */ .devis-titre{ margin:0 0 14px;font-family:var(--f-display);font-weight:700;font-size:17px; line-height:1.2;letter-spacing:-.02em;color:var(--ink); } .devis-liste{margin:0;padding:0;list-style:none;display:grid;gap:9px} .devis-liste li{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .devis-liste span{ font-family:var(--f-display);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--t5); } .devis-liste b{font-family:var(--f-display);font-weight:500;font-size:14px;color:var(--text);text-align:right} .devis-pied{ margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-faint); font-size:12.5px;line-height:1.55;color:var(--t4); } /* ------------------------- écran 4 refait ------------------------- */ .pane-soiree{display:grid;align-content:center;gap:clamp(20px,4vh,40px)} .soiree-tete{max-width:60ch} .soiree-tete .lede{margin-top:14px} /* Le site ne disait ni ou ni quand, sur aucun des six ecrans : ni « Ouagadougou », ni « Burkina », ni une date. Seule occurrence dans le depot, le JSON-LD, que personne ne lit. */ .soiree-ou{ margin:10px 0 0;font-family:var(--f-display);font-weight:500;font-size:13px; letter-spacing:.02em;color:var(--t3); } /* Les informations pratiques : elles se lisent apres le lieu et la date, pas avant, et ne pesent pas la meme graisse. */ .soiree-pratique{margin-top:6px;font-weight:400;color:var(--t4)} /* Quatre temps depuis le 15 aout 2026 : l'arrivee est un temps a part entiere, c'est la que le rituel commence. Sous 860 px les quatre passent en deux colonnes : empilees, elles debordaient l'ecran, qui ne defile pas. */ .temps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,28px)} .temps article{ position:relative;padding-top:18px;border-top:1px solid var(--line-2); display:grid;align-content:start;gap:8px; } .temps article::after{ content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--sortie); } .screen.vu .temps article::after{transform:scaleX(1)} .screen.vu .temps article:nth-child(2)::after{transition-delay:140ms} .screen.vu .temps article:nth-child(3)::after{transition-delay:280ms} .screen.vu .temps article:nth-child(4)::after{transition-delay:420ms} .temps-n{ font-family:var(--f-display);font-weight:700;font-size:11px; letter-spacing:.2em;color:var(--accent-txt); } .temps h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .temps p{margin:0;font-size:13.5px;line-height:1.6;color:var(--t3)} .chiffres{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,28px); padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--line-faint); } .chiffres div{display:grid;gap:4px} .chiffres b{ font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3.4vw,40px); line-height:1;letter-spacing:-.03em;color:var(--ink); } .chiffres span{ font-family:var(--f-display);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--t5); } /* ------------------------- caution ODC, écran 5 ------------------------- */ .caution{margin-top:clamp(16px,2.6vh,26px);padding-top:14px;border-top:1px solid var(--line-faint)} .caution .micro{margin-bottom:10px} /* Le logo de l'agence prend la place du mot ODC, aligne sur la ligne de base du texte. Blanc comme les logos partenaires juste en dessous. */ .logo-odc{ height:1.5em;width:auto;display:inline-block;vertical-align:-.42em; margin:0 .18em;opacity:.62;transition:opacity 320ms var(--sortie); } .caution:hover .logo-odc{opacity:.85} @media (prefers-color-scheme: light){ .logo-odc{filter:invert(1);opacity:.7} } /* ------------------------- fiche film ------------------------- */ .fiche{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px} .fiche[hidden]{display:none} .fiche-voile{ position:absolute;inset:0;background:rgba(6,5,4,.78);backdrop-filter:blur(10px); opacity:0;transition:opacity 380ms var(--sortie); } .fiche.ouverte .fiche-voile{opacity:1} .fiche-carte{ position:relative;z-index:1;width:min(760px,100%); display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%); background:var(--surface);border:1px solid var(--line-2);border-radius:16px; overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.6); opacity:0;transform:translateY(26px) scale(.96); transition:opacity 420ms var(--sortie),transform 560ms var(--sortie); } .fiche.ouverte .fiche-carte{opacity:1;transform:none} /* L'affiche occupe toute la hauteur, son propre flou sert de fond coloré. */ .fiche-visuel{position:relative;overflow:hidden;min-height:340px;background:var(--surface-2)} #fiche-fond{ position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover; filter:blur(34px) saturate(1.5);opacity:.5;transform:scale(1.1); } #fiche-img{ position:relative;width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.06);transition:transform 1400ms var(--sortie); } .fiche.ouverte #fiche-img{transform:scale(1)} .fiche-visuel::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.28) 100%); } @media (prefers-color-scheme: light){ .fiche-visuel::after{background:linear-gradient(90deg,transparent 60%,rgba(255,255,255,.3) 100%)} } .fiche-texte{ position:relative;display:grid;align-content:center;gap:0; padding:clamp(24px,3.4vw,38px); } .fiche-pastilles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .fiche-pastilles span{ padding:5px 11px;border-radius:999px;background:var(--surface-2); border:1px solid var(--line-faint); font-family:var(--f-display);font-weight:500;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--t3); } .fiche-titre{ margin:0;font-family:var(--f-display);font-weight:700; font-size:clamp(24px,3vw,34px);line-height:1.06;letter-spacing:-.03em;color:var(--ink); } .fiche-titre::after{ content:"";display:block;width:44px;height:2px;margin-top:16px;border-radius:2px; background:var(--accent); } .fiche-synopsis{margin:16px 0 0;font-size:14.5px;line-height:1.68;color:var(--t3)} .fiche-x{position:absolute;top:12px;right:12px;z-index:2;background:var(--surface)} @media (max-width:640px){ .fiche-carte{grid-template-columns:1fr;max-height:86dvh;overflow-y:auto} .fiche-visuel{min-height:0;aspect-ratio:16/10} .fiche-visuel::after{background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.4) 100%)} #fiche-img{object-position:center 22%} .fiche-texte{padding:20px} } /* ------------------------- adaptatif ------------------------- */ @media (max-width:1000px){ .pane-hero{ grid-template-columns:1fr;grid-template-rows:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(12px,2vh,22px); } .mosaique{grid-template-columns:repeat(3,1fr)} .hero-copy{align-content:start} .pane-hero .cta-row{margin-top:clamp(16px,2.6vh,26px)} .pane-hero .lede{margin-top:18px} .pane-hero .slogan{margin-top:16px} .offres{grid-template-columns:1fr;gap:8px} .offre{grid-template-columns:auto 1fr auto;grid-template-areas: "num nom nom" "num cible cible" "num prix go"; align-items:baseline;padding:14px 16px;gap:4px 14px} .offre-num{grid-area:num} .offre-tag{display:none} .offre-nom{grid-area:nom;font-size:21px} .offre-cible{grid-area:cible;font-size:13px} .offre-prix{grid-area:prix;margin-top:8px;padding-top:8px} /* Le libelle disparaissait avec la mise en page compacte, et la carte n'annoncait plus qu'elle s'ouvre. Seule la fleche reste visible ; le libelle demeure dans l'arbre d'accessibilite. */ .offre-go{grid-area:go;align-self:end;justify-self:end;font-size:0;margin:0;padding:0} .offre-go::after{font-size:15px} } @media (max-width:860px){ /* La marge laterale se resserre : le bandeau de preuve s'en sert aussi. */ :root{--marge-ecran:clamp(16px,5vw,24px)} /* Sur mobile le site se comporte comme une application : une seule vue visible a la fois, on change UNIQUEMENT par le menu, jamais en faisant defiler. On ne peut donc pas atterrir par accident sur une autre page. Si une vue depasse la hauteur, elle defile en interne, sans jamais entrainer le passage a la vue suivante (overscroll-behavior:contain). */ html, body{height:100%;overflow:hidden} .deck{ display:block;height:100dvh;width:100%;overflow:hidden;scroll-snap-type:none; } .screen{ display:none;position:absolute;inset:0; width:100%;height:100dvh;min-height:0; overflow:hidden;overscroll-behavior:none; grid-template-rows:auto;place-items:stretch; padding:calc(var(--nav-h) + 12px) var(--marge-ecran) calc(38px + env(safe-area-inset-bottom)); } .screen.actif{display:flex;flex-direction:column;justify-content:flex-start} /* Les panneaux coulent dans la vue ; le scroll interne prend le relais. */ .pane{max-height:none;min-height:0;height:auto} .pane-hero,.pane-config{height:auto;max-height:none} .pane-config{align-self:auto} /* Le mur d'affiches garde une hauteur maitrisee en tete du hero. */ .mosaique{height:38svh;min-height:240px} /* Barre epuree facon application : WhatsApp + menu. L'icone de partage (trois cercles en diagonale) est retiree du mobile, le partage natif du navigateur reste accessible. */ #share{display:none} /* Menu en panneau deroulant, ouvert par le hamburger. Meme specificite que la regle qui le masque sur grand ecran, sinon elle ne serait pas battue. */ .nav-actions .burger{display:grid} .menu{ position:fixed;top:var(--nav-h);right:0;left:0;z-index:40; display:flex;flex-direction:column;gap:0; background:var(--nav-bg);backdrop-filter:blur(18px); border-bottom:1px solid var(--line); padding:6px 0; transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform .28s var(--sortie),opacity .2s; } body.menu-ouvert .menu{transform:none;opacity:1;pointer-events:auto} .menu button{ width:100%;text-align:left;padding:14px clamp(16px,5vw,28px); font-size:15px;border-radius:0; } .menu button[aria-current="true"]{color:var(--accent-txt)} .menu-mobile{display:flex} /* L'Escale pose quatre questions, une de plus que les autres offres : sans ce resserrement, son budget et son bouton sortaient du cadre sur un 390x844, format le plus courant. */ .etape{gap:6px} .etape-q{font-size:14.5px} .etape-aide{font-size:11.5px;line-height:1.38} .stepper{padding:4px} .stepper input{font-size:30px;width:72px} .btn-cta{display:none} .nom-long{display:none} .nom-court{display:block} .colonne{transform:none} .arrow{display:none} /* Le mur passe sous le texte du hero : ses cartes ne sont plus atteignables au doigt, quatre sur cinquante-quatre avaient leur centre libre. Il redevient decor, la fiche reste ouverte au pointeur fin. */ .mosaique{pointer-events:none} .config-grid{grid-template-columns:1fr} .segmented{display:flex} .config-head{align-items:center} /* La barre nomme deja l'ecran courant : le surtitre le repete et coute une ligne de hauteur, sur un format ou chaque ligne compte. */ .eyebrow{display:none} .config-head-actions .lien{display:none} /* le menu ramène déjà aux formules */ /* Un LI voisin recouvrait le tiers bas du bouton : meme famille que le pied qui volait « Poursuivre ». */ #changer-niveau{position:relative;z-index:2} /* .eyebrow disparait parce qu'il repete le nom de l'ecran. Celui-ci nomme l'offre ouverte : c'est du contenu, pas une redite de la barre. */ .detail-tag{display:block} .col[data-col]{display:none} .col.is-shown{display:flex} .contact-grid{grid-template-columns:1fr;gap:14px} .niveaux{grid-template-columns:1fr} .niveaux button{grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px} .niveaux em{grid-column:1 / -1} .temps{grid-template-columns:1fr 1fr;gap:10px} .soiree-ou{margin-top:8px;font-size:12px} .soiree-pratique{margin-top:4px} .soiree-tete .lede{margin-top:10px} .temps p{font-size:12.5px} .chiffres{grid-template-columns:repeat(2,1fr);gap:12px} .caution{display:none} /* Ces trois suppressions ne valent que dans le tunnel, ou la place manque et ou le recapitulatif suit. Sur l'ecran de contact pur, le numero et le champ de message sont le sujet meme de l'ecran : ils restent. */ body.a-configure .contact-a .lede{display:none} body.a-configure .joindre{display:none} .temps p{font-size:13px} .pane-contact .title{font-size:clamp(20px,6vw,27px)} .pilote{bottom:10px;right:12px} .pied{bottom:12px;left:12px;font-size:10px;gap:6px} .legal{font-size:10.5px} /* Contact resserré dans le tunnel : le mot facultatif se dit sur WhatsApp. */ body.a-configure .champ:nth-child(4){display:none} .contact-b{gap:8px} .champ{gap:4px} .champ input{padding:10px 12px;font-size:13.5px} .champ label{font-size:9px} .resume{padding:13px 15px;gap:7px;margin-top:14px} .resume-l b{font-size:14px} .resume-total b{font-size:18px} .contact-actions{gap:7px;margin-top:3px} } @media (max-width:560px){ .display{font-size:clamp(27px,8vw,36px)} .photo-slot{height:52%} .temps article{padding-top:10px} /* Les paragraphes reprennent la place de la bande de chiffres, qui repetait des faits deja ecrits dedans. Le reste se resserre pour les 21 px qui manquaient encore sur 375 x 667. */ .chiffres{display:none} .temps p{font-size:11.5px;line-height:1.4} .soiree-tete .lede{font-size:12.5px;line-height:1.45;margin-top:8px} .temps{gap:8px} .temps article{padding-top:8px} .temps h3{font-size:17px} .soiree-tete .lede{margin-top:10px} .soiree-ou{margin-top:5px;line-height:1.35;font-size:11.5px} .soiree-pratique{margin-top:3px} .pane-soiree{gap:clamp(12px,2.4vh,22px)} } /* Écrans courts : on comprime, on ne réintroduit jamais le défilement. */ @media (max-height:720px){ :root{--nav-h:56px} /* 20px sous le contenu : la bande du pied fixe ne bloque aucun clic (pointer-events:none) mais le bouton ne doit pas sortir du cadre. */ .screen{padding-top:calc(var(--nav-h) + 6px);padding-bottom:20px} .title{font-size:clamp(19px,4.4vw,30px)} .title-s{font-size:20px;margin-bottom:12px} .eyebrow{margin-bottom:9px} .btn{padding:11px 18px;font-size:12.5px} .chips button{padding:6px 11px;font-size:11.5px} .etape{gap:4px} .etape-q{font-size:13.5px;line-height:1.25} .etape-aide{font-size:10.5px;line-height:1.3} .config-grid{margin-top:6px} .config-head .eyebrow{margin-bottom:3px} .col-form{gap:5px} .recap{padding-top:8px;gap:4px;font-size:12.5px} .block{gap:7px} .col-form{gap:8px} .stepper input{font-size:36px;width:86px} .icon{width:34px;height:34px} .fields input{padding:9px 12px;font-size:13px} .legal{font-size:10px} .ticket-body{padding:12px} .ticket-offre{font-size:19px;margin-bottom:9px} .ticket-grid{gap:9px 12px} .lede{font-size:13px} .temps{gap:9px} .temps article{padding-top:9px} .pane-contact .title{font-size:20px} .contact-b{gap:7px} .champ{gap:4px} .champ:nth-child(4){display:none} /* le mot facultatif passe par WhatsApp */ .pane-contact .title{font-size:clamp(19px,5.6vw,25px)} .contact-a .eyebrow{margin-bottom:8px} .champ input{padding:9px 12px;font-size:13.5px} .champ label{font-size:9px} .resume{padding:12px 14px;gap:6px;margin-top:12px} .resume-l b{font-size:14px} .resume-total b{font-size:18px} .contact-actions{gap:7px;margin-top:3px} .pane-contact .legal{font-size:10px;line-height:1.4} .pane-contact .eyebrow{margin-bottom:6px} .pane-contact .legal{line-height:1.4} } /* Petit téléphone : on retire ce qui est déjà dit ailleurs plutôt que de laisser un écran déborder. */ @media (max-width:860px) and (max-height:720px){ .pane-hero{grid-template-rows:minmax(0,.68fr) minmax(0,1.32fr)} .pane-hero .slogan{display:none} .picks{grid-template-columns:1fr 1fr} .picks em{display:none} .picks button{padding:9px 12px} .salle .micro{font-size:9px;letter-spacing:.1em} .siege{height:20px} .ecran-salle{height:13px;font-size:8.5px} .recap{font-size:12.5px;gap:4px;padding-top:9px} .recap .total b{font-size:20px} .btn.wide{padding:11px 18px} .title-s{font-size:17px;margin-bottom:8px} .config-grid{margin-top:4px} .segmented button{padding:6px 14px} .pane-contact .legal{line-height:1.35} .stepper input{font-size:32px} .contact-b{gap:6px} .champ{gap:3px} body.a-configure .champ:nth-child(4){display:none} /* le mot passe par WhatsApp */ /* Quatre formules doivent tenir dans 667px de haut sans etre rognees : sur un iPhone SE, la quatrieme sortait de l'ecran avec son prix. */ .offres{gap:6px} .offre{padding:10px 14px;gap:3px 12px} .offre-nom{font-size:18px} .offre-cible{font-size:11.5px;line-height:1.36} .offre-prix{margin-top:5px;padding-top:5px;font-size:11.5px} .pane .title{font-size:19px;margin-bottom:8px} .pane-contact .title{font-size:19px} .pane-contact .legal{font-size:9px;line-height:1.35} .resume{gap:5px;padding:11px 13px;margin-top:10px} .resume-l b{font-size:13.5px} .resume-total b{font-size:16px} .contact-actions{gap:6px;margin-top:2px} .lien{font-size:11px} .config-grid{margin-top:2px} .contact-a .eyebrow{margin-bottom:5px} .pane-contact .lede{display:none} .contact-grid{gap:8px} body.a-configure .joindre{display:none} .resume-l:nth-child(2){display:none} /* le titulaire vient d'etre saisi, le volume reste */ .col-form{gap:6px} .recap{padding-top:7px;gap:3px} .recap .total{padding-top:5px} .btn.wide{padding:9px 16px} .champ label{font-size:9px;letter-spacing:.18em} .champ input{padding:8px 11px;font-size:13px} .btn{padding:10px 16px} .segmented button{padding:5px 12px;font-size:12px} .title-s{font-size:16px;margin-bottom:6px} .etape{gap:6px} .etape-q{font-size:13.5px} .etape-aide{font-size:11px;line-height:1.4} .picks{grid-template-columns:1fr 1fr} .stepper input{width:60px} /* Les pastilles reviennent au retour a la ligne. Elles etaient sur une seule ligne defilante, sans barre ni indice : sur un 375px les dernieres options (« 20, Pack Prestige », « Nous en parlerons ») etaient coupees et rien ne signalait qu'il en existait d'autres. */ .chips{flex-wrap:wrap;gap:6px} .chips button{flex:0 1 auto;min-width:0} /* Le format le plus dur : 375x667, avec les quatre questions de L'Escale ou le recapitulatif de L'Invitation et son bloc de billets. */ .etape{gap:4px} .etape-aide{font-size:10.5px;line-height:1.3} .stepper{padding:3px} .stepper input{font-size:26px;width:58px} .col-form{gap:6px} .pane-demande .billets{padding:8px 10px;gap:5px} .pane-demande .billets-q{font-size:11.5px} .pane-demande .demande-actions{gap:6px} /* Les deux pastilles disent deja « Un seul billet » et « Un billet par personne » : la phrase qui les explique est la seule chose qu'on puisse retirer ici sans perdre de sens, et elle vaut les onze pixels manquants. */ .pane-demande .billets .etape-aide{display:none} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .deck{scroll-behavior:auto} .offre:hover{transform:none} .anim{opacity:1;transform:none} .carte img{opacity:1;transform:none} .display .ligne i{transform:none} .colonne{transform:none} .carte:hover{transform:none} } /* ========================================================= Pages de documentation : 404, mentions légales, confidentialité. Ces règles vivaient en