/* ==================================================================
Coopéré — style.css
Réécriture lisible de main.css (build Tailwind figé) : mêmes
déclarations, recopiées à l'identique ; seuls les noms de classes
changent. complements.css est intégré en fin de fichier.
Chaque classe regroupe les utilitaires Tailwind que portait
l'élément (indiqués en commentaire).
================================================================== */
/* Classes du HTML d'origine absentes du build main.css (sans effet),
volontairement non reproduites pour garder un rendu identique :
bg-blue-cp/10 bg-blue-cp/60 bg-ink/15 bg-mute/40 bg-rose-cp/20 bg-rose-cp/25 border-blue-cp border-ink border-ink/10 border-ink/15 duration-[1200ms] focus:border-ink focus:border-rose-cp from-ink/70 group-hover:border-ink hover:border-ink/40 text-ink/70 text-ink/75 text-ink/85 via-ink/20 */
/* ---------- socle Tailwind : reset, variables, éléments ---------- */
*,
:after,
:before { --tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:; }
::backdrop { --tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:; }
*,
:after,
:before { border:0 solid #e5e7eb;box-sizing:border-box; }
:after,
:before { --tw-content:""; }
:host,
html { -webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4; }
body { line-height:inherit;margin:0; }
hr { border-top-width:1px;color:inherit;height:0; }
abbr:where([title]) { -webkit-text-decoration:underline dotted;text-decoration:underline dotted; }
h1,
h2,
h3,
h4,
h5,
h6 { font-size:inherit;font-weight:inherit; }
a { color:inherit;text-decoration:inherit; }
b,
strong { font-weight:bolder; }
code,
kbd,
pre,
samp { font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal; }
small { font-size:80%; }
sub,
sup { font-size:75%;line-height:0;position:relative;vertical-align:initial; }
sub { bottom:-.25em; }
sup { top:-.5em; }
table { border-collapse:collapse;border-color:inherit;text-indent:0; }
button,
input,
optgroup,
select,
textarea { font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0; }
button,
select { text-transform:none; }
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) { -webkit-appearance:button;background-color:initial;background-image:none; }
:-moz-focusring { outline:auto; }
:-moz-ui-invalid { box-shadow:none; }
progress { vertical-align:initial; }
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height:auto; }
[type=search] { -webkit-appearance:textfield;outline-offset:-2px; }
::-webkit-search-decoration { -webkit-appearance:none; }
::-webkit-file-upload-button { -webkit-appearance:button;font:inherit; }
summary { display:list-item; }
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre { margin:0; }
fieldset { margin:0; }
fieldset,
legend { padding:0; }
menu,
ol,
ul { list-style:none;margin:0;padding:0; }
dialog { padding:0; }
textarea { resize:vertical; }
input::placeholder,
textarea::placeholder { color:#9ca3af;opacity:1; }
[role=button],
button { cursor:pointer; }
:disabled { cursor:default; }
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video { display:block;vertical-align:middle; }
img,
video { height:auto;max-width:100%; }
[hidden]:where(:not([hidden=until-found])) { display:none; }
:root { --background:0 0% 100%;--foreground:210 15% 8%;--card:0 0% 100%;--card-foreground:210 15% 8%;--popover:0 0% 100%;--popover-foreground:210 15% 8%;--primary:194 22% 44%;--primary-foreground:0 0% 100%;--secondary:40 30% 94%;--secondary-foreground:210 15% 8%;--muted:40 30% 94%;--muted-foreground:210 6% 40%;--accent:4 82% 80%;--accent-foreground:210 15% 8%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:210 15% 92%;--input:210 15% 92%;--ring:194 22% 44%;--radius:0.5rem; }
* { border-color:#e8ebee;border-color:hsl(var(--border)); }
body { background-color:#fff;background-color:hsl(var(--background));color:#111417;color:hsl(var(--foreground)); }
:root { --cp-blue:#567f89;--cp-blue-deep:#3d5f68;--cp-blue-ink:#22333a;--cp-rose:#f5a9a3;--cp-rose-deep:#e08a83;--cp-beige:#f6f2ea;--cp-beige-warm:#ede6d8;--cp-white:#fff;--cp-ink:#101418;--cp-mute:#6b7378;--cp-line:#10141814; }
body,
html { -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";background:#fff;background:var(--cp-white);color:#101418;color:var(--cp-ink);font-family:Manrope,ui-sans-serif,system-ui,-apple-system,sans-serif;margin:0;overflow-x:hidden;padding:0; }
::selection { background:#22333a;color:#f5a9a3; }
::-webkit-scrollbar { height:8px;width:8px; }
::-webkit-scrollbar-track { background:#0000; }
::-webkit-scrollbar-thumb { background:#10141826;border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#10141859; }
/* ---------- animations et autres at-rules du build --------------- */
@keyframes pulse{50%{opacity:.5}}
@keyframes enter{0%{opacity:1;opacity:var(--tw-enter-opacity,1);transform:translateZ(0) scaleX(1) rotate(0);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}
@keyframes exit{to{opacity:1;opacity:var(--tw-exit-opacity,1);transform:translateZ(0) scaleX(1) rotate(0);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}
@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}
@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}
/* ============== classes du site (noms français) =================== */
/* --- bloc (ex : block) --- */
.bloc {
display:block; /* block */
}
/* --- texte-equilibre (ex : text-balance) --- */
.texte-equilibre {
text-wrap:balance; /* text-balance */
}
/* --- largeur-lecture (ex : max-w-3xl) --- */
.largeur-lecture {
max-width:48rem; /* max-w-3xl */
}
/* --- largeur-2xl (ex : max-w-2xl) --- */
.largeur-2xl {
max-width:42rem; /* max-w-2xl */
}
/* --- largeur-xl (ex : max-w-xl) --- */
.largeur-xl {
max-width:36rem; /* max-w-xl */
}
/* --- largeur-3xl (ex : max-w-3xl) --- */
.largeur-3xl {
max-width:48rem; /* max-w-3xl */
}
/* --- largeur-4xl (ex : max-w-4xl) --- */
.largeur-4xl {
max-width:56rem; /* max-w-4xl */
}
/* --- largeur-5xl (ex : max-w-5xl) --- */
.largeur-5xl {
max-width:64rem; /* max-w-5xl */
}
/* --- texte-bleu (ex : text-blue-cp) --- */
.texte-bleu {
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- texte-rose (ex : text-rose-cp) --- */
.texte-rose {
color:#f5a9a3; /* text-rose-cp */
color:var(--cp-rose); /* text-rose-cp */
}
/* --- accent-bleu-italique (ex : italic text-blue-cp) --- */
.accent-bleu-italique {
font-style:italic; /* italic */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- accent-rose-italique (ex : italic text-rose-cp) --- */
.accent-rose-italique {
font-style:italic; /* italic */
color:#f5a9a3; /* text-rose-cp */
color:var(--cp-rose); /* text-rose-cp */
}
/* --- accent-encre (ex : not-italic text-ink) --- */
.accent-encre {
font-style:normal; /* not-italic */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
/* --- icone-fixe (ex : shrink-0) --- */
.icone-fixe {
flex-shrink:0; /* shrink-0 */
}
/* --- surtitre--menu (ex : mb-6) --- */
.surtitre--menu {
margin-bottom:1.5rem; /* mb-6 */
}
/* --- surtitre--sur-sombre (ex : text-white/50) --- */
.surtitre--sur-sombre {
color:#ffffff80; /* text-white/50 */
}
/* --- surtitre--pied-colonne (ex : text-white/50 mb-5) --- */
.surtitre--pied-colonne {
margin-bottom:1.25rem; /* mb-5 */
color:#ffffff80; /* text-white/50 */
}
/* --- surtitre (ex : kicker) --- */
.surtitre {
color:#6b7378; /* kicker */
color:var(--cp-mute); /* kicker */
font-family:JetBrains Mono,monospace; /* kicker */
font-size:11px; /* kicker */
letter-spacing:.24em; /* kicker */
text-transform:uppercase; /* kicker */
}
/* --- surtitre--sombre (ex : !text-white/60) --- */
.surtitre--sombre {
color:#fff9!important; /* !text-white/60 */
}
/* --- surtitre--bloc (ex : block) --- */
.surtitre--bloc {
display:block; /* block */
}
/* --- bouton-principal--large (ex : w-full justify-center) --- */
.bouton-principal--large {
width:100%; /* w-full */
justify-content:center; /* justify-center */
}
/* --- bouton-principal--espace-haut (ex : mt-8 inline-flex items-center gap-2) --- */
.bouton-principal--espace-haut {
margin-top:2rem; /* mt-8 */
display:inline-flex; /* inline-flex */
align-items:center; /* items-center */
gap:.5rem; /* gap-2 */
}
/* --- bouton-principal (ex : btn-primary) --- */
.bouton-principal {
align-items:center; /* btn-primary */
background:#101418; /* btn-primary */
background:var(--cp-ink); /* btn-primary */
border-radius:999px; /* btn-primary */
color:#fff; /* btn-primary */
display:inline-flex; /* btn-primary */
font-weight:500; /* btn-primary */
gap:.6rem; /* btn-primary */
letter-spacing:-.01em; /* btn-primary */
padding:1rem 1.6rem; /* btn-primary */
transition:background .3s ease,transform .3s ease; /* btn-primary */
}
.bouton-principal:hover {
background:#567f89; /* btn-primary */
background:var(--cp-blue); /* btn-primary */
transform:translateY(-1px); /* btn-primary */
}
/* --- desactivable (ex : disabled:opacity-60) --- */
.desactivable:disabled {
opacity:.6; /* disabled:opacity-60 */
}
/* --- bouton-secondaire (ex : btn-ghost) --- */
.bouton-secondaire {
align-items:center; /* btn-ghost */
border:1px solid #10141826; /* btn-ghost */
border-radius:999px; /* btn-ghost */
color:#101418; /* btn-ghost */
color:var(--cp-ink); /* btn-ghost */
display:inline-flex; /* btn-ghost */
font-weight:500; /* btn-ghost */
gap:.6rem; /* btn-ghost */
padding:1rem 1.6rem; /* btn-ghost */
transition:background .3s ease,border-color .3s ease; /* btn-ghost */
}
.bouton-secondaire:hover {
background:#1014180a; /* btn-ghost */
border-color:#10141859; /* btn-ghost */
}
/* --- paragraphe-attenue (ex : mt-3 text-mute leading-relaxed) --- */
.paragraphe-attenue {
margin-top:.75rem; /* mt-3 */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- titre-page (ex : mt-8 font-editorial text-6xl md:text-8xl leading-[0.92] tracking-tight) --- */
.titre-page {
margin-top:2rem; /* mt-8 */
font-size:3.75rem; /* text-6xl */
line-height:1; /* text-6xl */
line-height:.92; /* leading-[0.92] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-page {
font-size:6rem; /* md:text-8xl */
line-height:1; /* md:text-8xl */
}
}
/* --- titre-page--geant (ex : lg:text-[9vw]) --- */
@media (min-width:1024px) {
.titre-page--geant {
font-size:9vw; /* lg:text-[9vw] */
}
}
/* --- titre-section (ex : mt-6 font-editorial text-4xl md:text-6xl leading-[1] tracking-tight) --- */
.titre-section {
margin-top:1.5rem; /* mt-6 */
font-size:2.25rem; /* text-4xl */
line-height:2.5rem; /* text-4xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-section {
font-size:3.75rem; /* md:text-6xl */
line-height:1; /* md:text-6xl */
}
}
/* --- titre-section-sans-marge (ex : font-editorial text-4xl md:text-6xl leading-[1] tracking-tight) --- */
.titre-section-sans-marge {
font-size:2.25rem; /* text-4xl */
line-height:2.5rem; /* text-4xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-section-sans-marge {
font-size:3.75rem; /* md:text-6xl */
line-height:1; /* md:text-6xl */
}
}
/* --- titre-section-moyen (ex : mt-6 font-editorial text-5xl md:text-6xl leading-[1] tracking-tight) --- */
.titre-section-moyen {
margin-top:1.5rem; /* mt-6 */
font-size:3rem; /* text-5xl */
line-height:1; /* text-5xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-section-moyen {
font-size:3.75rem; /* md:text-6xl */
line-height:1; /* md:text-6xl */
}
}
/* --- grand-titre (ex : font-editorial text-5xl md:text-6xl leading-[1] tracking-tight) --- */
.grand-titre {
font-size:3rem; /* text-5xl */
line-height:1; /* text-5xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.grand-titre {
font-size:3.75rem; /* md:text-6xl */
line-height:1; /* md:text-6xl */
}
}
/* --- titre-section-grand (ex : mt-6 font-editorial text-5xl md:text-7xl leading-[0.95] tracking-tight) --- */
.titre-section-grand {
margin-top:1.5rem; /* mt-6 */
font-size:3rem; /* text-5xl */
line-height:1; /* text-5xl */
line-height:.95; /* leading-[0.95] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-section-grand {
font-size:4.5rem; /* md:text-7xl */
line-height:1; /* md:text-7xl */
}
}
/* section adhésion : phrase longue -> titre plus mesuré et interligne plus douce */
.section-adhesion .titre-section-grand {
font-size:2rem;
line-height:1.15;
}
@media (min-width:768px) {
.section-adhesion .titre-section-grand {
font-size:3rem; /* text-5xl au lieu de 7xl */
line-height:1.12;
}
}
/* --- titre-affiche (ex : font-editorial text-5xl md:text-7xl leading-[0.95] tracking-tight) --- */
.titre-affiche {
font-size:3rem; /* text-5xl */
line-height:1; /* text-5xl */
line-height:.95; /* leading-[0.95] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-affiche {
font-size:4.5rem; /* md:text-7xl */
line-height:1; /* md:text-7xl */
}
}
/* --- icone-carte (ex : text-ink mt-4) --- */
.icone-carte {
margin-top:1rem; /* mt-4 */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
/* --- icone-note (ex : text-blue-cp shrink-0 mt-1) --- */
.icone-note {
margin-top:.25rem; /* mt-1 */
flex-shrink:0; /* shrink-0 */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- filtre (ex : px-4 py-2 rounded-full text-sm border transition-colors) --- */
.filtre {
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
padding-left:1rem; /* px-4 */
padding-right:1rem; /* px-4 */
padding-bottom:.5rem; /* py-2 */
padding-top:.5rem; /* py-2 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
}
/* --- filtre--clair (ex : bg-white text-ink border-line hover:border-ink/40) --- */
.filtre--clair {
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
/* --- filtre--sombre (ex : bg-ink text-white border-ink) --- */
.filtre--sombre {
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- carte-univers--haute (ex : md:min-h-[540px]) --- */
@media (min-width:768px) {
.carte-univers--haute {
min-height:540px; /* md:min-h-[540px] */
}
}
/* --- application (ex : App) --- */
.application {
background:#fff; /* App */
min-height:100vh; /* App */
}
/* --- page (ex : relative bg-white text-ink) --- */
.page {
position:relative; /* relative */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
/* --- conteneur (ex : max-w-[1400px] mx-auto px-6 md:px-10) --- */
.conteneur {
margin-left:auto; /* mx-auto */
margin-right:auto; /* mx-auto */
max-width:1400px; /* max-w-[1400px] */
padding-left:1.5rem; /* px-6 */
padding-right:1.5rem; /* px-6 */
}
@media (min-width:768px) {
.conteneur {
padding-left:2.5rem; /* md:px-10 */
padding-right:2.5rem; /* md:px-10 */
}
}
/* --- entete (ex : fixed top-0 left-0 right-0 z-50 transition-[padding,background] duration-500 py-5) --- */
.entete {
position:fixed; /* fixed */
left:0; /* left-0 */
right:0; /* right-0 */
top:0; /* top-0 */
z-index:50; /* z-50 */
padding-bottom:1.25rem; /* py-5 */
padding-top:1.25rem; /* py-5 */
transition-duration:.15s; /* transition-[padding,background] */
transition-property:padding,background; /* transition-[padding,background] */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-[padding,background] */
transition-duration:.5s; /* duration-500 */
animation-duration:.5s; /* duration-500 */
}
/* --- entete__barre (ex : mx-4 md:mx-6 rounded-full bg-transparent) --- */
.entete__barre {
margin-left:1rem; /* mx-4 */
margin-right:1rem; /* mx-4 */
border-radius:9999px; /* rounded-full */
background-color:initial; /* bg-transparent */
}
@media (min-width:768px) {
.entete__barre {
margin-left:1.5rem; /* md:mx-6 */
margin-right:1.5rem; /* md:mx-6 */
}
}
/* --- entete__interieur (ex : flex items-center justify-between px-5 md:px-7 py-3) --- */
.entete__interieur {
display:flex; /* flex */
align-items:center; /* items-center */
justify-content:space-between; /* justify-between */
padding-left:1.25rem; /* px-5 */
padding-right:1.25rem; /* px-5 */
padding-bottom:.75rem; /* py-3 */
padding-top:.75rem; /* py-3 */
}
@media (min-width:768px) {
.entete__interieur {
padding-left:1.75rem; /* md:px-7 */
padding-right:1.75rem; /* md:px-7 */
}
}
/* --- logo (ex : flex items-center gap-2) --- */
.logo {
display:flex;
flex-direction:column; /* nom au-dessus, "depuis" en dessous (2 lignes) */
align-items:flex-start;
gap:0;
}
/* --- logo__nom (ex : text-ink font-editorial text-2xl md:text-[26px] font-medium tracking-tight leading-none) --- */
.logo__nom {
font-size:1.5rem; /* text-2xl */
line-height:2rem; /* text-2xl */
font-weight:500; /* font-medium */
line-height:1; /* leading-none */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.logo__nom {
font-size:26px; /* md:text-[26px] */
}
}
/* --- logo__depuis (ex : hidden md:inline-block text-[10px] font-mono-cp text-mute uppercase tracking-[0.24em] mt-1) --- */
.logo__depuis {
margin-top:.25rem; /* mt-1 */
display:none; /* hidden */
font-size:10px; /* text-[10px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
@media (min-width:768px) {
.logo__depuis {
display:inline-block; /* md:inline-block */
}
}
/* --- navigation (ex : hidden lg:flex items-center gap-1) --- */
.navigation {
display:none; /* hidden */
align-items:center; /* items-center */
gap:.25rem; /* gap-1 */
}
@media (min-width:1024px) {
.navigation {
display:flex; /* lg:flex */
}
}
/* --- navigation__lien (ex : px-3 py-2 rounded-full text-[13px] font-medium transition-colors text-ink/70 hover:text-ink hover:bg-black/[0.04]) --- */
.navigation__lien {
border-radius:9999px; /* rounded-full */
padding-left:.75rem; /* px-3 */
padding-right:.75rem; /* px-3 */
padding-bottom:.5rem; /* py-2 */
padding-top:.5rem; /* py-2 */
font-size:13px; /* text-[13px] */
font-weight:500; /* font-medium */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
}
.navigation__lien:hover {
background-color:#0000000a; /* hover:bg-black/[0.04] */
color:#101418; /* hover:text-ink */
color:var(--cp-ink); /* hover:text-ink */
}
/* --- navigation__lien--actif (ex : px-3 py-2 rounded-full text-[13px] font-medium transition-colors bg-ink text-white) --- */
.navigation__lien--actif {
border-radius:9999px; /* rounded-full */
padding-left:.75rem; /* px-3 */
padding-right:.75rem; /* px-3 */
padding-bottom:.5rem; /* py-2 */
padding-top:.5rem; /* py-2 */
font-size:13px; /* text-[13px] */
font-weight:500; /* font-medium */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- rangee-centree (ex : flex items-center gap-3) --- */
.rangee-centree {
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
}
/* --- entete__cta (ex : hidden md:inline-flex items-center gap-2 px-4 py-2.5 rounded-full bg-ink text-white text-[13px] font-medium hover:bg-[var(--cp-blue)] transition-colors) --- */
.entete__cta {
display:none; /* hidden */
align-items:center; /* items-center */
gap:.5rem; /* gap-2 */
border-radius:9999px; /* rounded-full */
padding-left:1rem; /* px-4 */
padding-right:1rem; /* px-4 */
padding-bottom:.625rem; /* py-2.5 */
padding-top:.625rem; /* py-2.5 */
font-size:13px; /* text-[13px] */
font-weight:500; /* font-medium */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
.entete__cta:hover {
background-color:#567f89; /* hover:bg-[var(--cp-blue)] */
background-color:var(--cp-blue); /* hover:bg-[var(--cp-blue)] */
}
@media (min-width:768px) {
.entete__cta {
display:inline-flex; /* md:inline-flex */
}
}
/* --- bouton-menu (ex : lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-full border border-line hover:bg-black/[0.04]) --- */
.bouton-menu {
display:inline-flex; /* inline-flex */
height:2.5rem; /* h-10 */
width:2.5rem; /* w-10 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
.bouton-menu:hover {
background-color:#0000000a; /* hover:bg-black/[0.04] */
}
@media (min-width:1024px) {
.bouton-menu {
display:none; /* lg:hidden */
}
}
/* --- entete__icone : boutons-icônes ronds du header (mail, profil), toujours visibles --- */
.entete__icone {
display:inline-flex;
height:2.5rem; /* h-10 */
width:2.5rem; /* w-10 */
align-items:center;
justify-content:center;
border-radius:9999px; /* rounded-full */
border-width:1px;
border-color:#10141814;
border-color:var(--cp-line); /* border-line */
color:var(--cp-ink);
transition-duration:.15s;
transition-property:color,background-color,border-color;
transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.entete__icone:hover {
background-color:#0000000a; /* hover:bg-black/[0.04] */
}
/* --- menu-mobile (ex : fixed inset-0 z-40 bg-[#faf9f6] pt-24 px-6 lg:hidden) --- */
.menu-mobile {
position:fixed; /* fixed */
inset:0; /* inset-0 */
z-index:40; /* z-40 */
--tw-bg-opacity:1; /* bg-[#faf9f6] */
background-color:#faf9f6; /* bg-[#faf9f6] */
background-color:rgb(250 249 246/var(--tw-bg-opacity,1)); /* bg-[#faf9f6] */
padding-left:1.5rem; /* px-6 */
padding-right:1.5rem; /* px-6 */
padding-top:6rem; /* pt-24 */
}
@media (min-width:1024px) {
.menu-mobile {
display:none; /* lg:hidden */
}
}
/* --- menu-mobile__cadre (ex : max-w-xl mx-auto) --- */
.menu-mobile__cadre {
margin-left:auto; /* mx-auto */
margin-right:auto; /* mx-auto */
max-width:36rem; /* max-w-xl */
}
/* --- liste-espacee (ex : space-y-4) --- */
.liste-espacee>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-4 */
margin-bottom:calc(1rem*var(--tw-space-y-reverse)); /* space-y-4 */
margin-top:calc(1rem*(1 - var(--tw-space-y-reverse))); /* space-y-4 */
}
/* --- menu-mobile__pied (ex : pt-6) --- */
.menu-mobile__pied {
padding-top:1.5rem; /* pt-6 */
}
/* --- menu-mobile__lien (ex : flex items-baseline gap-4 border-b border-line pb-4 hover:text-blue-cp transition-colors) --- */
.menu-mobile__lien {
display:flex; /* flex */
align-items:baseline; /* items-baseline */
gap:1rem; /* gap-4 */
border-bottom-width:1px; /* border-b */
padding-bottom:1rem; /* pb-4 */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
.menu-mobile__lien:hover {
color:#567f89; /* hover:text-blue-cp */
color:var(--cp-blue); /* hover:text-blue-cp */
}
/* --- menu-mobile__numero (ex : font-mono-cp text-xs text-mute) --- */
.menu-mobile__numero {
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- menu-mobile__intitule (ex : font-editorial text-3xl) --- */
.menu-mobile__intitule {
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- pied-de-page (ex : relative bg-ink text-white overflow-hidden) --- */
.pied-de-page {
position:relative; /* relative */
overflow:hidden; /* overflow-hidden */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- pied-de-page__conteneur (ex : max-w-[1400px] mx-auto px-6 md:px-10 py-20 md:py-28) --- */
.pied-de-page__conteneur {
margin-left:auto; /* mx-auto */
margin-right:auto; /* mx-auto */
max-width:1400px; /* max-w-[1400px] */
padding-left:1.5rem; /* px-6 */
padding-right:1.5rem; /* px-6 */
padding-bottom:5rem; /* py-20 */
padding-top:5rem; /* py-20 */
}
@media (min-width:768px) {
.pied-de-page__conteneur {
padding-left:2.5rem; /* md:px-10 */
padding-right:2.5rem; /* md:px-10 */
padding-bottom:7rem; /* md:py-28 */
padding-top:7rem; /* md:py-28 */
}
}
/* --- pied-de-page__grille (ex : grid grid-cols-1 md:grid-cols-12 gap-12) --- */
.pied-de-page__grille {
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
gap:3rem; /* gap-12 */
}
@media (min-width:768px) {
.pied-de-page__grille {
grid-template-columns:repeat(12,minmax(0,1fr)); /* md:grid-cols-12 */
}
}
/* --- pied-de-page__titre (ex : mt-4 font-editorial text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight) --- */
.pied-de-page__titre {
margin-top:1rem; /* mt-4 */
font-size:2.25rem; /* réduit (avant 3rem) */
line-height:1;
line-height:1; /* leading un peu plus aéré */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.pied-de-page__titre {
font-size:3.25rem; /* réduit (avant 4.5rem) */
line-height:1;
}
}
@media (min-width:1024px) {
.pied-de-page__titre {
font-size:4rem; /* réduit (avant 6rem) */
line-height:1.02;
}
}
/* --- groupe-boutons (ex : mt-8 flex flex-wrap gap-3) --- */
.groupe-boutons {
margin-top:2rem; /* mt-8 */
display:flex; /* flex */
flex-wrap:wrap; /* flex-wrap */
gap:.75rem; /* gap-3 */
}
/* --- bouton-blanc (ex : inline-flex items-center gap-2 px-5 py-3 rounded-full bg-white text-ink text-sm font-medium hover:bg-rose-cp transition-colors) --- */
.bouton-blanc {
display:inline-flex; /* inline-flex */
align-items:center; /* items-center */
gap:.5rem; /* gap-2 */
border-radius:9999px; /* rounded-full */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-left:1.25rem; /* px-5 */
padding-right:1.25rem; /* px-5 */
padding-bottom:.75rem; /* py-3 */
padding-top:.75rem; /* py-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
font-weight:500; /* font-medium */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
.bouton-blanc:hover {
background:#f5a9a3; /* hover:bg-rose-cp */
background:var(--cp-rose); /* hover:bg-rose-cp */
}
/* --- bouton-contour-blanc (ex : inline-flex items-center gap-2 px-5 py-3 rounded-full border border-white/20 text-white text-sm font-medium hover:bg-white/10 transition-colors) --- */
.bouton-contour-blanc {
display:inline-flex; /* inline-flex */
align-items:center; /* items-center */
gap:.5rem; /* gap-2 */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
border-color:#fff3; /* border-white/20 */
padding-left:1.25rem; /* px-5 */
padding-right:1.25rem; /* px-5 */
padding-bottom:.75rem; /* py-3 */
padding-top:.75rem; /* py-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
font-weight:500; /* font-medium */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
}
.bouton-contour-blanc:hover {
background-color:#ffffff1a; /* hover:bg-white/10 */
}
/* --- pied-de-page__liste (ex : space-y-3 text-white/80) --- */
.pied-de-page__liste>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-3 */
margin-bottom:calc(.75rem*var(--tw-space-y-reverse)); /* space-y-3 */
margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse))); /* space-y-3 */
}
.pied-de-page__liste {
color:#fffc; /* text-white/80 */
}
/* --- pied-de-page__lien (ex : hover:text-rose-cp transition-colors) --- */
.pied-de-page__lien {
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
}
.pied-de-page__lien:hover {
color:#f5a9a3; /* hover:text-rose-cp */
color:var(--cp-rose); /* hover:text-rose-cp */
}
/* --- pied-de-page__texte (ex : text-white/70 text-sm mb-4 leading-relaxed) --- */
.pied-de-page__texte {
margin-bottom:1rem; /* mb-4 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
line-height:1.625; /* leading-relaxed */
color:#ffffffb3; /* text-white/70 */
}
/* --- infolettre (ex : flex items-center gap-2) --- */
.infolettre {
display:flex; /* flex */
align-items:center; /* items-center */
gap:.5rem; /* gap-2 */
}
/* --- infolettre__champ (ex : flex-1 bg-white/5 border border-white/15 rounded-full px-4 py-3 text-sm placeholder:text-white/40 focus:outline-none focus:border-rose-cp) --- */
.infolettre__champ {
flex:1 1; /* flex-1 */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
border-color:#ffffff26; /* border-white/15 */
background-color:#ffffff0d; /* bg-white/5 */
padding-left:1rem; /* px-4 */
padding-right:1rem; /* px-4 */
padding-bottom:.75rem; /* py-3 */
padding-top:.75rem; /* py-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
}
.infolettre__champ::placeholder {
color:#fff6; /* placeholder:text-white/40 */
}
.infolettre__champ:focus {
outline:2px solid #0000; /* focus:outline-none */
outline-offset:2px; /* focus:outline-none */
}
/* --- infolettre__bouton (ex : w-11 h-11 rounded-full bg-rose-cp text-ink flex items-center justify-center hover:bg-white transition-colors disabled:opacity-60) --- */
.infolettre__bouton {
display:flex; /* flex */
height:2.75rem; /* h-11 */
width:2.75rem; /* w-11 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
background:#f5a9a3; /* bg-rose-cp */
background:var(--cp-rose); /* bg-rose-cp */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
.infolettre__bouton:hover {
--tw-bg-opacity:1; /* hover:bg-white */
background-color:#fff; /* hover:bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* hover:bg-white */
}
.infolettre__bouton:disabled {
opacity:.6; /* disabled:opacity-60 */
}
/* --- pied-de-page__bloc-signature (ex : mt-20) --- */
.pied-de-page__bloc-signature {
margin-top:5rem; /* mt-20 */
}
/* --- pied-de-page__signature (ex : font-editorial text-[18vw] md:text-[15vw] leading-[0.85] tracking-tighter text-white/[0.06] select-none) --- */
.pied-de-page__signature {
-webkit-user-select:none; /* select-none */
user-select:none; /* select-none */
font-size:18vw; /* text-[18vw] */
line-height:.85; /* leading-[0.85] */
letter-spacing:-.05em; /* tracking-tighter */
color:#ffffff0f; /* text-white/[0.06] */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.pied-de-page__signature {
font-size:15vw; /* md:text-[15vw] */
}
}
/* --- pied-de-page__bas (ex : mt-8 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-xs text-white/50) --- */
.pied-de-page__bas {
margin-top:2rem; /* mt-8 */
display:flex; /* flex */
flex-direction:column; /* flex-col */
align-items:flex-start; /* items-start */
justify-content:space-between; /* justify-between */
gap:1rem; /* gap-4 */
border-top-width:1px; /* border-t */
border-color:#ffffff1a; /* border-white/10 */
padding-top:2rem; /* pt-8 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
color:#ffffff80; /* text-white/50 */
}
@media (min-width:768px) {
.pied-de-page__bas {
flex-direction:row; /* md:flex-row */
align-items:center; /* md:items-center */
}
}
/* --- pied-de-page__liens-bas (ex : flex gap-6) --- */
.pied-de-page__liens-bas {
display:flex; /* flex */
gap:1.5rem; /* gap-6 */
}
/* --- pied-de-page__lien-bas (ex : hover:text-white) --- */
.pied-de-page__lien-bas:hover {
--tw-text-opacity:1; /* hover:text-white */
color:#fff; /* hover:text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* hover:text-white */
}
/* --- section-heros (ex : relative pt-32 md:pt-40 pb-20 bg-white overflow-hidden) --- */
.section-heros {
position:relative; /* relative */
overflow:hidden; /* overflow-hidden */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:5rem; /* pb-20 */
padding-top:8rem; /* pt-32 */
}
@media (min-width:768px) {
.section-heros {
padding-top:10rem; /* md:pt-40 */
}
}
/* --- section-blanche (ex : relative w-full py-24 md:py-32 bg-white) --- */
.section-blanche {
position:relative; /* relative */
width:100%; /* w-full */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
}
@media (min-width:768px) {
.section-blanche {
padding-bottom:8rem; /* md:py-32 */
padding-top:8rem; /* md:py-32 */
}
}
/* --- section-blanche-compacte (ex : relative w-full py-24 bg-white) --- */
.section-blanche-compacte {
position:relative; /* relative */
width:100%; /* w-full */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
}
/* --- section-blanche-haute (ex : relative w-full py-24 md:py-36 bg-white) --- */
.section-blanche-haute {
position:relative; /* relative */
width:100%; /* w-full */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
}
@media (min-width:768px) {
.section-blanche-haute {
padding-bottom:9rem; /* md:py-36 */
padding-top:9rem; /* md:py-36 */
}
}
/* --- section-beige (ex : relative w-full py-24 md:py-32 bg-beige) --- */
.section-beige {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
}
@media (min-width:768px) {
.section-beige {
padding-bottom:8rem; /* md:py-32 */
padding-top:8rem; /* md:py-32 */
}
}
/* --- section-beige-compacte (ex : relative w-full py-24 bg-beige) --- */
.section-beige-compacte {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
}
/* --- section-beige-chaud (ex : relative w-full py-24 bg-beige-warm) --- */
.section-beige-chaud {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
background:#ede6d8; /* bg-beige-warm */
background:var(--cp-beige-warm); /* bg-beige-warm */
}
/* --- section-adhesion (ex : relative w-full py-24 md:py-36 bg-beige-warm) --- */
.section-adhesion {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
background:#ede6d8; /* bg-beige-warm */
background:var(--cp-beige-warm); /* bg-beige-warm */
}
@media (min-width:768px) {
.section-adhesion {
padding-bottom:9rem; /* md:py-36 */
padding-top:9rem; /* md:py-36 */
}
}
/* --- section-info-pratique (ex : relative w-full py-16 bg-beige-warm) --- */
.section-info-pratique {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:4rem; /* py-16 */
padding-top:4rem; /* py-16 */
background:#ede6d8; /* bg-beige-warm */
background:var(--cp-beige-warm); /* bg-beige-warm */
}
/* --- section-garantie (ex : relative w-full py-20 bg-beige-warm) --- */
.section-garantie {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:5rem; /* py-20 */
padding-top:5rem; /* py-20 */
background:#ede6d8; /* bg-beige-warm */
background:var(--cp-beige-warm); /* bg-beige-warm */
}
/* --- section-beige-produit (ex : relative w-full py-20 md:py-24 bg-beige) --- */
.section-beige-produit {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:5rem; /* py-20 */
padding-top:5rem; /* py-20 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
}
@media (min-width:768px) {
.section-beige-produit {
padding-bottom:6rem; /* md:py-24 */
padding-top:6rem; /* md:py-24 */
}
}
/* --- section-blanche-produit (ex : relative w-full py-20 md:py-24 bg-white) --- */
.section-blanche-produit {
position:relative; /* relative */
width:100%; /* w-full */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:5rem; /* py-20 */
padding-top:5rem; /* py-20 */
}
@media (min-width:768px) {
.section-blanche-produit {
padding-bottom:6rem; /* md:py-24 */
padding-top:6rem; /* md:py-24 */
}
}
/* --- section-liste-evenements (ex : relative w-full py-16 md:py-20) --- */
.section-liste-evenements {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:4rem; /* py-16 */
padding-top:4rem; /* py-16 */
}
@media (min-width:768px) {
.section-liste-evenements {
padding-bottom:5rem; /* md:py-20 */
padding-top:5rem; /* md:py-20 */
}
}
/* --- section-nue (ex : relative w-full py-16 md:py-24) --- */
.section-nue {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:4rem; /* py-16 */
padding-top:4rem; /* py-16 */
}
@media (min-width:768px) {
.section-nue {
padding-bottom:6rem; /* md:py-24 */
padding-top:6rem; /* md:py-24 */
}
}
/* --- section-editoriale (ex : relative w-full py-16 md:py-24 bg-white) --- */
.section-editoriale {
position:relative; /* relative */
width:100%; /* w-full */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:4rem; /* py-16 */
padding-top:4rem; /* py-16 */
}
@media (min-width:768px) {
.section-editoriale {
padding-bottom:6rem; /* md:py-24 */
padding-top:6rem; /* md:py-24 */
}
}
/* --- section-filtres (ex : relative w-full pb-6) --- */
.section-filtres {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:1.5rem; /* pb-6 */
}
/* --- section-sombre (ex : relative w-full py-24 bg-ink text-white) --- */
.section-sombre {
position:relative; /* relative */
width:100%; /* w-full */
padding-bottom:6rem; /* py-24 */
padding-top:6rem; /* py-24 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- section-titre-page-editoriale (ex : relative pt-40 pb-16 bg-white) --- */
.section-titre-page-editoriale {
position:relative; /* relative */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:4rem; /* pb-16 */
padding-top:10rem; /* pt-40 */
}
/* --- section-titre-page (ex : pt-40 pb-16 bg-white) --- */
.section-titre-page {
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:4rem; /* pb-16 */
padding-top:10rem; /* pt-40 */
}
/* --- section-titre-page-large (ex : pt-40 pb-20 bg-white) --- */
.section-titre-page-large {
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:5rem; /* pb-20 */
padding-top:10rem; /* pt-40 */
}
/* --- titre-editorial (ex : font-editorial text-3xl tracking-tight) --- */
.titre-editorial {
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- numero-section (ex : font-mono-cp text-[11px] text-blue-cp tracking-[0.24em]) --- */
.numero-section {
font-size:11px; /* text-[11px] */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- trait-section (ex : h-px w-8 bg-blue-cp/60) --- */
.trait-section {
height:1px; /* h-px */
width:2rem; /* w-8 */
}
/* --- entete-section (ex : flex items-end justify-between mb-16 gap-8 flex-wrap) --- */
.entete-section {
margin-bottom:4rem; /* mb-16 */
display:flex; /* flex */
flex-wrap:wrap; /* flex-wrap */
align-items:flex-end; /* items-end */
justify-content:space-between; /* justify-between */
gap:2rem; /* gap-8 */
}
/* --- entete-section-serree (ex : flex items-end justify-between mb-14 gap-8 flex-wrap) --- */
.entete-section-serree {
margin-bottom:3.5rem; /* mb-14 */
display:flex; /* flex */
flex-wrap:wrap; /* flex-wrap */
align-items:flex-end; /* items-end */
justify-content:space-between; /* justify-between */
gap:2rem; /* gap-8 */
}
/* --- entete-section-flexible (ex : flex flex-col md:flex-row justify-between md:items-end gap-8) --- */
.entete-section-flexible {
display:flex;
flex-direction:column;
align-items:center; /* centré (cohérent avec le bas de page) */
text-align:center;
gap:2rem; /* gap-8 */
}
/* --- intro-section (ex : max-w-md text-mute leading-relaxed) --- */
.intro-section {
max-width:28rem; /* max-w-md */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- heros__badge (ex : flex items-center gap-3 mb-8) --- */
.heros__badge {
margin-bottom:2rem; /* mb-8 */
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
}
/* --- point-rose (ex : w-2 h-2 rounded-full bg-[#f5a9a3]) --- */
.point-rose {
height:.5rem; /* h-2 */
width:.5rem; /* w-2 */
border-radius:9999px; /* rounded-full */
--tw-bg-opacity:1; /* bg-[#f5a9a3] */
background-color:#f5a9a3; /* bg-[#f5a9a3] */
background-color:rgb(245 169 163/var(--tw-bg-opacity,1)); /* bg-[#f5a9a3] */
}
/* --- heros__titre (ex : font-editorial text-[13vw] md:text-[9.5vw] lg:text-[8.2vw] leading-[0.92] tracking-[-0.03em] text-ink) --- */
.heros__titre {
font-size:9vw; /* text-[9vw] */
line-height:.92; /* leading-[0.92] */
letter-spacing:-.03em; /* tracking-[-0.03em] */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.heros__titre {
font-size:6.5vw; /* md:text-[6.5vw] */
}
}
@media (min-width:1024px) {
.heros__titre {
font-size:5.5vw; /* lg:text-[5.5vw] */
}
}
/* --- mot-revele (ex : mask-reveal align-baseline) --- */
.mot-revele {
vertical-align:initial; /* align-baseline */
display:inline-block; /* mask-reveal */
overflow:hidden; /* mask-reveal */
/* marge basse pour ne pas rogner les jambages (q, p, Q...) ; compensée pour ne pas écarter les lignes */
padding-bottom:0.18em;
margin-bottom:-0.18em;
}
/* --- heros__grille (ex : mt-14 grid grid-cols-1 md:grid-cols-12 gap-10 items-end) --- */
.heros__grille {
margin-top:3.5rem; /* mt-14 */
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
align-items:flex-end; /* items-end */
gap:2.5rem; /* gap-10 */
}
@media (min-width:768px) {
.heros__grille {
grid-template-columns:repeat(12,minmax(0,1fr)); /* md:grid-cols-12 */
}
}
/* --- heros__chapo (ex : md:col-span-6 md:col-start-6 text-lg md:text-xl text-ink/75 leading-relaxed max-w-xl text-balance) --- */
.heros__chapo {
max-width:36rem; /* max-w-xl */
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
line-height:1.625; /* leading-relaxed */
text-wrap:balance; /* text-balance */
}
@media (min-width:768px) {
.heros__chapo {
grid-column:span 6/span 6; /* md:col-span-6 */
grid-column-start:1; /* aligné à gauche, comme les boutons */
grid-row:1; /* même rangée que les boutons */
font-size:1.25rem; /* md:text-xl */
line-height:1.75rem; /* md:text-xl */
}
}
/* --- groupe-boutons-heros (ex : mt-10 flex flex-wrap gap-3) --- */
.groupe-boutons-heros {
margin-top:2.5rem; /* mt-10 */
display:flex; /* flex */
flex-wrap:wrap; /* flex-wrap */
gap:.75rem; /* gap-3 */
}
@media (min-width:768px) {
/* héros uniquement : boutons dans les colonnes de droite, alignés à droite et en bas, en face du chapô */
.section-heros .groupe-boutons-heros {
grid-column:8/span 5;
grid-row:1; /* même rangée que le chapô */
justify-content:flex-end;
margin-top:0;
}
}
/* --- heros__cadre-visuel (ex : relative mt-20 md:mt-28 max-w-[1400px] mx-auto px-6 md:px-10) --- */
.heros__cadre-visuel {
position:relative; /* relative */
margin-left:auto; /* mx-auto */
margin-right:auto; /* mx-auto */
margin-top:5rem; /* mt-20 */
max-width:1400px; /* max-w-[1400px] */
padding-left:1.5rem; /* px-6 */
padding-right:1.5rem; /* px-6 */
}
@media (min-width:768px) {
.heros__cadre-visuel {
margin-top:7rem; /* md:mt-28 */
padding-left:2.5rem; /* md:px-10 */
padding-right:2.5rem; /* md:px-10 */
}
}
/* --- heros__visuel (ex : relative w-full aspect-[16/8] md:aspect-[16/7] overflow-hidden rounded-[2px] grain) --- */
.heros__visuel {
position:relative; /* relative */
aspect-ratio:16/8; /* aspect-[16/8] */
width:100%; /* w-full */
overflow:hidden; /* overflow-hidden */
border-radius:2px; /* rounded-[2px] */
position:relative; /* grain */
}
.heros__visuel:after {
background-image:url("data:image/svg+xml;utf8,"); /* grain */
content:""; /* grain */
inset:0; /* grain */
mix-blend-mode:multiply; /* grain */
opacity:.06; /* grain */
pointer-events:none; /* grain */
position:absolute; /* grain */
}
@media (min-width:768px) {
.heros__visuel {
aspect-ratio:16/7; /* md:aspect-[16/7] */
}
}
/* --- calque (ex : absolute inset-0) --- */
.calque {
position:absolute; /* absolute */
inset:0; /* inset-0 */
}
/* --- image-pleine (ex : w-full h-full object-cover) --- */
.image-pleine {
height:100%; /* h-full */
width:100%; /* w-full */
object-fit:cover; /* object-cover */
}
/* --- slider du héros : 4 images en fondu enchaîné --- */
.slider-heros {
position:absolute;
inset:0;
}
.slide-heros {
position:absolute;
inset:0;
opacity:0;
transition:opacity 1s ease;
}
.slide-heros.est-actif {
opacity:1;
}
.slider-heros__puces {
position:absolute;
bottom:1rem;
left:50%;
transform:translateX(-50%);
display:flex;
gap:.5rem;
z-index:3;
}
.slider-heros__puce {
width:8px;
height:8px;
padding:0;
border:none;
border-radius:9999px;
background:rgba(255,255,255,.55);
cursor:pointer;
transition:background .25s, width .25s;
}
.slider-heros__puce.est-actif {
width:22px;
background:#fff;
}
@media (prefers-reduced-motion: reduce) {
.slide-heros {
transition:none;
}
}
/* --- heros__voile (ex : absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/20) --- */
.heros__voile {
position:absolute; /* absolute */
inset:0; /* inset-0 */
background-image:linear-gradient(to bottom,var(--tw-gradient-stops)); /* bg-gradient-to-b */
--tw-gradient-from:#0000 var(--tw-gradient-from-position); /* from-transparent */
--tw-gradient-to:#0000 var(--tw-gradient-to-position); /* from-transparent */
--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); /* from-transparent */
--tw-gradient-to:#0000 var(--tw-gradient-to-position); /* via-transparent */
--tw-gradient-stops:var(--tw-gradient-from),#0000 var(--tw-gradient-via-position),var(--tw-gradient-to); /* via-transparent */
--tw-gradient-to:#0003 var(--tw-gradient-to-position); /* to-black/20 */
}
/* --- heros__legende (ex : absolute left-6 md:left-10 bottom-6 md:bottom-10 flex items-center gap-3 text-white) --- */
.heros__legende {
position:absolute; /* absolute */
bottom:1.5rem; /* bottom-6 */
left:1.5rem; /* left-6 */
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
}
@media (min-width:768px) {
.heros__legende {
bottom:2.5rem; /* md:bottom-10 */
left:2.5rem; /* md:left-10 */
}
}
/* --- pastille-lecture (ex : w-10 h-10 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center) --- */
.pastille-lecture {
display:flex; /* flex */
height:2.5rem; /* h-10 */
width:2.5rem; /* w-10 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
border-color:#ffffff4d; /* border-white/30 */
background-color:#fff3; /* bg-white/20 */
--tw-backdrop-blur:blur(12px); /* backdrop-blur-md */
-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); /* backdrop-blur-md */
backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); /* backdrop-blur-md */
}
/* --- etiquette-mono-blanche (ex : font-mono-cp text-[10px] uppercase tracking-[0.24em] text-white/70) --- */
.etiquette-mono-blanche {
font-size:10px; /* text-[10px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
color:#ffffffb3; /* text-white/70 */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
}
/* --- citation-legende (ex : font-editorial text-lg md:text-xl italic) --- */
.citation-legende {
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
font-style:italic; /* italic */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.citation-legende {
font-size:1.25rem; /* md:text-xl */
line-height:1.75rem; /* md:text-xl */
}
}
/* --- heros__badge-verre (ex : absolute right-6 md:right-10 top-6 md:top-10 glass rounded-2xl px-5 py-4) --- */
.heros__badge-verre {
position:absolute; /* absolute */
right:1.5rem; /* right-6 */
top:1.5rem; /* top-6 */
border-radius:1rem; /* rounded-2xl */
padding-left:1.25rem; /* px-5 */
padding-right:1.25rem; /* px-5 */
padding-bottom:1rem; /* py-4 */
padding-top:1rem; /* py-4 */
backdrop-filter:saturate(160%) blur(18px); /* glass */
-webkit-backdrop-filter:saturate(160%) blur(18px); /* glass */
background:#ffffffb8; /* glass */
border:1px solid #ffffff80; /* glass */
box-shadow:0 8px 32px #1014180f; /* glass */
}
@media (min-width:768px) {
.heros__badge-verre {
right:2.5rem; /* md:right-10 */
top:2.5rem; /* md:top-10 */
}
}
/* --- etiquette-mono-mute (ex : font-mono-cp text-[10px] uppercase tracking-[0.24em] text-mute) --- */
.etiquette-mono-mute {
font-size:10px; /* text-[10px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- heros__compteur (ex : font-editorial text-4xl md:text-5xl tracking-tight text-ink mt-1) --- */
.heros__compteur {
margin-top:.25rem; /* mt-1 */
font-size:2.25rem; /* text-4xl */
line-height:2.5rem; /* text-4xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.heros__compteur {
font-size:3rem; /* md:text-5xl */
line-height:1; /* md:text-5xl */
}
}
/* --- heros__defiler (ex : mt-6 flex items-center gap-3 text-mute text-xs font-mono-cp uppercase tracking-[0.24em]) --- */
.heros__defiler {
margin-top:1.5rem; /* mt-6 */
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- trait-defiler (ex : h-px w-10 bg-mute/40) --- */
.trait-defiler {
height:1px; /* h-px */
width:2.5rem; /* w-10 */
}
/* --- grille-compteurs (ex : mt-16 grid grid-cols-2 md:grid-cols-5 gap-y-10 md:gap-x-6) --- */
.grille-compteurs {
margin-top:4rem; /* mt-16 */
display:grid; /* grid */
grid-template-columns:repeat(2,minmax(0,1fr)); /* grid-cols-2 */
row-gap:2.5rem; /* gap-y-10 */
}
@media (min-width:768px) {
.grille-compteurs {
grid-template-columns:repeat(5,minmax(0,1fr)); /* md:grid-cols-5 */
column-gap:1.5rem; /* md:gap-x-6 */
}
}
/* --- compteur (ex : flex flex-col border-t border-ink/15 pt-5) --- */
.compteur {
display:flex; /* flex */
flex-direction:column; /* flex-col */
border-top-width:1px; /* border-t */
padding-top:1.25rem; /* pt-5 */
}
/* --- compteur__valeur (ex : font-editorial text-5xl md:text-6xl tracking-tight text-ink) --- */
.compteur__valeur {
font-size:3rem; /* text-5xl */
line-height:1; /* text-5xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.compteur__valeur {
font-size:3.75rem; /* md:text-6xl */
line-height:1; /* md:text-6xl */
}
}
/* --- compteur__legende (ex : mt-3 text-sm text-mute) --- */
.compteur__legende {
margin-top:.75rem; /* mt-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- note-bas (ex : mt-8 text-xs text-mute) --- */
.note-bas {
margin-top:2rem; /* mt-8 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- grille-univers (ex : grid grid-cols-1 md:grid-cols-12 md:auto-rows-[260px] gap-4) --- */
.grille-univers {
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
gap:1rem; /* gap-4 */
}
@media (min-width:768px) {
.grille-univers {
grid-auto-rows:260px; /* md:auto-rows-[260px] */
grid-template-columns:repeat(12,minmax(0,1fr)); /* md:grid-cols-12 */
}
}
/* --- case-7-double (ex : md:col-span-7 md:row-span-2) --- */
@media (min-width:768px) {
.case-7-double {
grid-column:span 7/span 7; /* md:col-span-7 */
grid-row:span 2/span 2; /* md:row-span-2 */
}
}
/* --- case-4-double (ex : md:col-span-4 md:row-span-2) --- */
@media (min-width:768px) {
.case-4-double {
grid-column:span 4/span 4; /* md:col-span-4 */
grid-row:span 2/span 2; /* md:row-span-2 */
}
}
/* --- carte-univers (ex : relative overflow-hidden rounded-2xl bg-beige h-full block hover-lift) --- */
.carte-univers {
position:relative; /* relative */
display:block; /* block */
height:100%; /* h-full */
overflow:hidden; /* overflow-hidden */
border-radius:1rem; /* rounded-2xl */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); /* hover-lift */
}
.carte-univers:hover {
box-shadow:0 30px 60px -20px #1014182e; /* hover-lift */
transform:translateY(-6px); /* hover-lift */
}
/* --- carte-univers__image (ex : absolute inset-0 w-full h-full object-cover transition-transform duration-[1200ms] group-hover:scale-105) --- */
.carte-univers__image {
position:absolute; /* absolute */
inset:0; /* inset-0 */
height:100%; /* h-full */
width:100%; /* w-full */
object-fit:cover; /* object-cover */
transition-duration:.15s; /* transition-transform */
transition-property:transform; /* transition-transform */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-transform */
}
.groupe:hover .carte-univers__image {
transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); /* group-hover:scale-105 */
--tw-scale-x:1.05; /* group-hover:scale-105 */
--tw-scale-y:1.05; /* group-hover:scale-105 */
}
/* --- carte-univers__voile (ex : absolute inset-0 bg-gradient-to-t from-ink/70 via-ink/20 to-transparent) --- */
.carte-univers__voile {
position:absolute; /* absolute */
inset:0; /* inset-0 */
background-image:linear-gradient(to top,var(--tw-gradient-stops)); /* bg-gradient-to-t */
--tw-gradient-to:#0000 var(--tw-gradient-to-position); /* to-transparent */
}
/* --- carte-univers__contenu (ex : absolute inset-0 p-6 md:p-8 flex flex-col justify-between text-white) --- */
.carte-univers__contenu {
position:absolute; /* absolute */
inset:0; /* inset-0 */
display:flex; /* flex */
flex-direction:column; /* flex-col */
justify-content:space-between; /* justify-between */
padding:1.5rem; /* p-6 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
}
@media (min-width:768px) {
.carte-univers__contenu {
padding:2rem; /* md:p-8 */
}
}
/* --- carte-univers__contenu-clair (ex : absolute inset-0 p-6 md:p-8 flex flex-col justify-between text-ink) --- */
.carte-univers__contenu-clair {
position:absolute; /* absolute */
inset:0; /* inset-0 */
display:flex; /* flex */
flex-direction:column; /* flex-col */
justify-content:space-between; /* justify-between */
padding:1.5rem; /* p-6 */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.carte-univers__contenu-clair {
padding:2rem; /* md:p-8 */
}
}
/* --- carte-univers__numero (ex : font-mono-cp text-[11px] uppercase tracking-[0.24em] text-white/70) --- */
.carte-univers__numero {
font-size:11px; /* text-[11px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
color:#ffffffb3; /* text-white/70 */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
}
/* --- etiquette-mono-attenuee (ex : font-mono-cp text-[11px] uppercase tracking-[0.24em] text-mute) --- */
.etiquette-mono-attenuee {
font-size:11px; /* text-[11px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- carte-univers__fleche (ex : w-10 h-10 rounded-full flex items-center justify-center border transition-transform group-hover:rotate-45 bg-white/10 border-white/30 text-white) --- */
.carte-univers__fleche {
display:flex; /* flex */
height:2.5rem; /* h-10 */
width:2.5rem; /* w-10 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
border-color:#ffffff4d; /* border-white/30 */
background-color:#ffffff1a; /* bg-white/10 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
transition-duration:.15s; /* transition-transform */
transition-property:transform; /* transition-transform */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-transform */
}
.groupe:hover .carte-univers__fleche {
--tw-rotate:45deg; /* group-hover:rotate-45 */
transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); /* group-hover:rotate-45 */
}
/* --- carte-univers__fleche-sombre (ex : w-10 h-10 rounded-full flex items-center justify-center border transition-transform group-hover:rotate-45 bg-ink text-white border-ink) --- */
.carte-univers__fleche-sombre {
display:flex; /* flex */
height:2.5rem; /* h-10 */
width:2.5rem; /* w-10 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
transition-duration:.15s; /* transition-transform */
transition-property:transform; /* transition-transform */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-transform */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
.groupe:hover .carte-univers__fleche-sombre {
--tw-rotate:45deg; /* group-hover:rotate-45 */
transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); /* group-hover:rotate-45 */
}
/* --- carte-univers__titre (ex : font-editorial text-3xl md:text-4xl leading-[1] tracking-tight) --- */
.carte-univers__titre {
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.carte-univers__titre {
font-size:2.25rem; /* md:text-4xl */
line-height:2.5rem; /* md:text-4xl */
}
}
/* --- carte-univers__titre-grand (ex : font-editorial text-3xl md:text-4xl leading-[1] tracking-tight md:text-5xl) --- */
.carte-univers__titre-grand {
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.carte-univers__titre-grand {
font-size:2.25rem; /* md:text-4xl */
line-height:2.5rem; /* md:text-4xl */
font-size:3rem; /* md:text-5xl */
line-height:1; /* md:text-5xl */
}
}
/* --- carte-univers__texte (ex : mt-3 text-sm md:text-[15px] leading-relaxed text-white/85) --- */
.carte-univers__texte {
margin-top:.75rem; /* mt-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
line-height:1.625; /* leading-relaxed */
color:#ffffffd9; /* text-white/85 */
}
@media (min-width:768px) {
.carte-univers__texte {
font-size:15px; /* md:text-[15px] */
}
}
/* --- carte-univers__texte-attenue (ex : mt-3 text-sm md:text-[15px] leading-relaxed text-mute) --- */
.carte-univers__texte-attenue {
margin-top:.75rem; /* mt-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
@media (min-width:768px) {
.carte-univers__texte-attenue {
font-size:15px; /* md:text-[15px] */
}
}
/* --- largeur-md (ex : max-w-md) --- */
.largeur-md {
max-width:28rem; /* max-w-md */
}
/* --- univers02-bandeau__carte (ex : w-full bg-[#f6f2ea] rounded-xl p-5 flex flex-col) --- */
.univers02-bandeau__carte {
display:flex; /* flex */
width:100%; /* w-full */
flex-direction:column; /* flex-col */
border-radius:.75rem; /* rounded-xl */
--tw-bg-opacity:1; /* bg-[#f6f2ea] */
background-color:#f6f2ea; /* bg-[#f6f2ea] */
background-color:rgb(246 242 234/var(--tw-bg-opacity,1)); /* bg-[#f6f2ea] */
padding:1.25rem; /* p-5 */
}
/* --- univers02-bandeau__ligne (ex : flex gap-4 justify-center items-center) --- */
.univers02-bandeau__ligne {
display:flex; /* flex */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
gap:1rem; /* gap-4 */
}
/* --- grille-manifeste (ex : mt-20 grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-12) --- */
.grille-manifeste {
margin-top:5rem; /* mt-20 */
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
column-gap:1.5rem; /* gap-x-6 */
row-gap:3rem; /* gap-y-12 */
}
@media (min-width:768px) {
.grille-manifeste {
grid-template-columns:repeat(3,minmax(0,1fr)); /* md:grid-cols-3 */
}
}
/* --- manifeste__bloc (ex : border-t border-ink/15 pt-6) --- */
.manifeste__bloc {
border-top-width:1px; /* border-t */
padding-top:1.5rem; /* pt-6 */
}
/* --- manifeste__numero (ex : font-editorial italic text-blue-cp text-lg) --- */
.manifeste__numero {
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
font-style:italic; /* italic */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- manifeste__titre (ex : mt-4 font-editorial text-3xl md:text-4xl leading-[1.05] tracking-tight text-balance) --- */
.manifeste__titre {
margin-top:1rem; /* mt-4 */
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
line-height:1.05; /* leading-[1.05] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
text-wrap:balance; /* text-balance */
}
@media (min-width:768px) {
.manifeste__titre {
font-size:2.25rem; /* md:text-4xl */
line-height:2.5rem; /* md:text-4xl */
}
}
/* --- manifeste__texte (ex : mt-5 text-[15px] text-mute leading-relaxed) --- */
.manifeste__texte {
margin-top:1.25rem; /* mt-5 */
font-size:15px; /* text-[15px] */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- bande-defilante (ex : py-20 md:py-24 bg-white hairline-top hairline-bottom) --- */
.bande-defilante {
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-bottom:5rem; /* py-20 */
padding-top:5rem; /* py-20 */
border-top:1px solid #10141814; /* hairline-top */
border-top:1px solid var(--cp-line); /* hairline-top */
border-bottom:1px solid #10141814; /* hairline-bottom */
border-bottom:1px solid var(--cp-line); /* hairline-bottom */
}
@media (min-width:768px) {
.bande-defilante {
padding-bottom:6rem; /* md:py-24 */
padding-top:6rem; /* md:py-24 */
}
}
/* --- bande-defilante__fenetre (ex : w-full overflow-hidden select-none) --- */
.bande-defilante__fenetre {
width:100%; /* w-full */
-webkit-user-select:none; /* select-none */
user-select:none; /* select-none */
overflow:hidden; /* overflow-hidden */
}
/* --- bandeau-defilant (ex : marquee) --- */
.bandeau-defilant {
animation:marquee 8s linear infinite; /* marquee — vitesse pilotée ici (plus le nombre est petit, plus c'est rapide) */
display:flex; /* marquee */
gap:6rem; /* marquee */
white-space:nowrap; /* marquee */
will-change:transform; /* marquee */
}
/* --- bandeau-defilant__groupe (ex : inline-flex items-center gap-8) --- */
.bandeau-defilant__groupe {
display:inline-flex; /* inline-flex */
align-items:center; /* items-center */
gap:2rem; /* gap-8 */
}
/* --- bandeau-defilant__texte (ex : font-editorial text-[8vw] md:text-[6.5vw] leading-none italic text-ink whitespace-nowrap) --- */
.bandeau-defilant__texte {
white-space:nowrap; /* whitespace-nowrap */
font-size:8vw; /* text-[8vw] */
font-style:italic; /* italic */
line-height:1; /* leading-none */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.bandeau-defilant__texte {
font-size:6.5vw; /* md:text-[6.5vw] */
}
}
/* --- grille-logiciels (ex : grid grid-cols-1 lg:grid-cols-2 gap-6) --- */
.grille-logiciels {
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
gap:1.5rem; /* gap-6 */
}
@media (min-width:1024px) {
.grille-logiciels {
grid-template-columns:repeat(2,minmax(0,1fr)); /* lg:grid-cols-2 */
}
}
/* --- carte-produit-claire (ex : bg-white rounded-2xl p-8 md:p-10 hover-lift) --- */
.carte-produit-claire {
border-radius:1rem; /* rounded-2xl */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding:2rem; /* p-8 */
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); /* hover-lift */
}
.carte-produit-claire:hover {
box-shadow:0 30px 60px -20px #1014182e; /* hover-lift */
transform:translateY(-6px); /* hover-lift */
}
@media (min-width:768px) {
.carte-produit-claire {
padding:2.5rem; /* md:p-10 */
}
}
/* --- carte-produit-sombre (ex : bg-ink text-white rounded-2xl p-8 md:p-10 hover-lift) --- */
.carte-produit-sombre {
border-radius:1rem; /* rounded-2xl */
padding:2rem; /* p-8 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); /* hover-lift */
}
.carte-produit-sombre:hover {
box-shadow:0 30px 60px -20px #1014182e; /* hover-lift */
transform:translateY(-6px); /* hover-lift */
}
@media (min-width:768px) {
.carte-produit-sombre {
padding:2.5rem; /* md:p-10 */
}
}
/* --- rangee-espacee (ex : flex items-center justify-between) --- */
.rangee-espacee {
display:flex; /* flex */
align-items:center; /* items-center */
justify-content:space-between; /* justify-between */
}
/* --- badge-certification (ex : text-xs font-mono-cp px-2 py-1 bg-blue-cp/10 text-blue-cp rounded-full) --- */
.badge-certification {
border-radius:9999px; /* rounded-full */
padding-left:.5rem; /* px-2 */
padding-right:.5rem; /* px-2 */
padding-bottom:.25rem; /* py-1 */
padding-top:.25rem; /* py-1 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- badge-nouveau (ex : text-xs font-mono-cp px-2 py-1 bg-rose-cp/20 text-rose-cp rounded-full) --- */
.badge-nouveau {
border-radius:9999px; /* rounded-full */
padding-left:.5rem; /* px-2 */
padding-right:.5rem; /* px-2 */
padding-bottom:.25rem; /* py-1 */
padding-top:.25rem; /* py-1 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#f5a9a3; /* text-rose-cp */
color:var(--cp-rose); /* text-rose-cp */
}
/* --- carte-logiciel__titre (ex : mt-6 font-editorial text-4xl md:text-5xl tracking-tight) --- */
.carte-logiciel__titre {
margin-top:1.5rem; /* mt-6 */
font-size:2.25rem; /* text-4xl */
line-height:2.5rem; /* text-4xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.carte-logiciel__titre {
font-size:3rem; /* md:text-5xl */
line-height:1; /* md:text-5xl */
}
}
/* --- carte-produit__texte (ex : mt-4 text-mute leading-relaxed max-w-md) --- */
.carte-produit__texte {
margin-top:1rem; /* mt-4 */
max-width:28rem; /* max-w-md */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- carte-produit__texte-blanc (ex : mt-4 text-white/70 leading-relaxed max-w-md) --- */
.carte-produit__texte-blanc {
margin-top:1rem; /* mt-4 */
max-width:28rem; /* max-w-md */
line-height:1.625; /* leading-relaxed */
color:#ffffffb3; /* text-white/70 */
}
/* --- carte-produit__bas (ex : mt-8 flex items-end justify-between border-t border-ink/10 pt-6) --- */
.carte-produit__bas {
margin-top:2rem; /* mt-8 */
display:flex; /* flex */
align-items:flex-end; /* items-end */
justify-content:space-between; /* justify-between */
border-top-width:1px; /* border-t */
padding-top:1.5rem; /* pt-6 */
}
/* --- carte-produit__bas-sombre (ex : mt-8 flex items-end justify-between border-t border-white/15 pt-6) --- */
.carte-produit__bas-sombre {
margin-top:2rem; /* mt-8 */
display:flex; /* flex */
align-items:flex-end; /* items-end */
justify-content:space-between; /* justify-between */
border-top-width:1px; /* border-t */
border-color:#ffffff26; /* border-white/15 */
padding-top:1.5rem; /* pt-6 */
}
/* --- prix (ex : font-editorial text-5xl tracking-tight) --- */
.prix {
font-size:3rem; /* text-5xl */
line-height:1; /* text-5xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- prix__unite-petite (ex : text-xl text-mute font-body) --- */
.prix__unite-petite {
font-size:1.25rem; /* text-xl */
line-height:1.75rem; /* text-xl */
font-family:Manrope,ui-sans-serif,system-ui,sans-serif; /* font-body */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- prix__unite-blanche (ex : text-xl text-white/60 font-body) --- */
.prix__unite-blanche {
font-size:1.25rem; /* text-xl */
line-height:1.75rem; /* text-xl */
color:#fff9; /* text-white/60 */
font-family:Manrope,ui-sans-serif,system-ui,sans-serif; /* font-body */
}
/* --- note-prix-bleue (ex : mt-2 text-sm text-blue-cp) --- */
.note-prix-bleue {
margin-top:.5rem; /* mt-2 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- note-prix-rose (ex : mt-2 text-sm text-rose-cp) --- */
.note-prix-rose {
margin-top:.5rem; /* mt-2 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#f5a9a3; /* text-rose-cp */
color:var(--cp-rose); /* text-rose-cp */
}
/* --- pastille-fleche-sombre (ex : w-12 h-12 rounded-full bg-ink text-white flex items-center justify-center) --- */
.pastille-fleche-sombre {
display:flex; /* flex */
height:3rem; /* h-12 */
width:3rem; /* w-12 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- pastille-fleche-rose (ex : w-12 h-12 rounded-full bg-rose-cp text-ink flex items-center justify-center) --- */
.pastille-fleche-rose {
display:flex; /* flex */
height:3rem; /* h-12 */
width:3rem; /* w-12 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
background:#f5a9a3; /* bg-rose-cp */
background:var(--cp-rose); /* bg-rose-cp */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
/* --- grille-temoignages (ex : mt-16 grid grid-cols-1 md:grid-cols-3 gap-6) --- */
.grille-temoignages {
margin-top:4rem; /* mt-16 */
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
gap:1.5rem; /* gap-6 */
}
@media (min-width:768px) {
.grille-temoignages {
grid-template-columns:repeat(3,minmax(0,1fr)); /* md:grid-cols-3 */
}
}
/* --- carte-temoignage (ex : bg-beige rounded-2xl p-7 md:p-8 h-full flex flex-col) --- */
.carte-temoignage {
display:flex; /* flex */
height:100%; /* h-full */
flex-direction:column; /* flex-col */
border-radius:1rem; /* rounded-2xl */
padding:1.75rem; /* p-7 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
}
@media (min-width:768px) {
.carte-temoignage {
padding:2rem; /* md:p-8 */
}
}
/* --- carte-temoignage__etoiles (ex : flex gap-0.5 text-rose-cp) --- */
.carte-temoignage__etoiles {
display:flex; /* flex */
gap:.125rem; /* gap-0.5 */
color:#f5a9a3; /* text-rose-cp */
color:var(--cp-rose); /* text-rose-cp */
}
/* --- carte-temoignage__citation (ex : mt-6 font-editorial text-2xl md:text-[26px] leading-[1.25] tracking-tight text-balance flex-1) --- */
.carte-temoignage__citation {
margin-top:1.5rem; /* mt-6 */
flex:1 1; /* flex-1 */
font-size:1.5rem; /* text-2xl */
line-height:2rem; /* text-2xl */
line-height:1.25; /* leading-[1.25] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
text-wrap:balance; /* text-balance */
}
@media (min-width:768px) {
.carte-temoignage__citation {
font-size:26px; /* md:text-[26px] */
}
}
/* --- carte-temoignage__auteur (ex : mt-8 pt-6 border-t border-ink/10) --- */
.carte-temoignage__auteur {
margin-top:2rem; /* mt-8 */
border-top-width:1px; /* border-t */
padding-top:1.5rem; /* pt-6 */
}
/* --- texte-medium (ex : font-medium) --- */
.texte-medium {
font-weight:500; /* font-medium */
}
/* --- texte-attenue-sm (ex : text-sm text-mute) --- */
.texte-attenue-sm {
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- grille-12-centree (ex : grid grid-cols-1 md:grid-cols-12 gap-10 items-center) --- */
.grille-12-centree {
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
align-items:center; /* items-center */
gap:2.5rem; /* gap-10 */
}
@media (min-width:768px) {
.grille-12-centree {
grid-template-columns:repeat(12,minmax(0,1fr)); /* md:grid-cols-12 */
}
}
/* --- colonne-7 (ex : md:col-span-7) --- */
@media (min-width:768px) {
.colonne-7 {
grid-column:span 7/span 7; /* md:col-span-7 */
}
}
/* --- colonne-6 (ex : md:col-span-6) --- */
@media (min-width:768px) {
.colonne-6 {
grid-column:span 6/span 6; /* md:col-span-6 */
}
}
/* --- colonne-5 (ex : md:col-span-5) --- */
@media (min-width:768px) {
.colonne-5 {
grid-column:span 5/span 5; /* md:col-span-5 */
}
}
/* --- colonne-3 (ex : md:col-span-3) --- */
@media (min-width:768px) {
.colonne-3 {
grid-column:span 3/span 3; /* md:col-span-3 */
}
}
/* --- colonne-2 (ex : md:col-span-2) --- */
@media (min-width:768px) {
.colonne-2 {
grid-column:span 2/span 2; /* md:col-span-2 */
}
}
/* --- paragraphe-adhesion (ex : mt-8 text-lg text-mute max-w-xl leading-relaxed) --- */
.paragraphe-adhesion {
margin-top:2rem; /* mt-8 */
max-width:36rem; /* max-w-xl */
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- carte-participation (ex : bg-white rounded-2xl p-8 md:p-10 shadow-[0_30px_80px_-30px_rgba(16,20,24,0.2)]) --- */
.carte-participation {
border-radius:1rem; /* rounded-2xl */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding:2rem; /* p-8 */
box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow); /* shadow-[0_30px_80px_-30px_rgba(16,20,24,0.2)] */
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); /* shadow-[0_30px_80px_-30px_rgba(16,20,24,0.2)] */
--tw-shadow:0 30px 80px -30px #10141833; /* shadow-[0_30px_80px_-30px_rgba(16,20,24,0.2)] */
--tw-shadow-colored:0 30px 80px -30px var(--tw-shadow-color); /* shadow-[0_30px_80px_-30px_rgba(16,20,24,0.2)] */
}
@media (min-width:768px) {
.carte-participation {
padding:2.5rem; /* md:p-10 */
}
}
/* --- carte-participation__prix (ex : mt-4 flex items-baseline gap-2) --- */
.carte-participation__prix {
margin-top:1rem; /* mt-4 */
display:flex; /* flex */
align-items:baseline; /* items-baseline */
gap:.5rem; /* gap-2 */
}
/* --- prix-enorme (ex : font-editorial text-7xl md:text-8xl tracking-tight) --- */
.prix-enorme {
font-size:4.5rem; /* text-7xl */
line-height:1; /* text-7xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.prix-enorme {
font-size:6rem; /* md:text-8xl */
line-height:1; /* md:text-8xl */
}
}
/* --- prix-enorme__unite (ex : font-editorial text-3xl text-mute) --- */
.prix-enorme__unite {
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- carte-participation__note (ex : mt-2 text-mute) --- */
.carte-participation__note {
margin-top:.5rem; /* mt-2 */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- carte-participation__liste (ex : mt-8 space-y-3 text-sm) --- */
.carte-participation__liste {
margin-top:2rem; /* mt-8 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
}
.carte-participation__liste>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-3 */
margin-bottom:calc(.75rem*var(--tw-space-y-reverse)); /* space-y-3 */
margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse))); /* space-y-3 */
}
/* --- item-a-puce (ex : flex items-start gap-3) --- */
.item-a-puce {
display:flex; /* flex */
align-items:flex-start; /* items-start */
gap:.75rem; /* gap-3 */
}
/* --- puce-bleue (ex : mt-1 w-1.5 h-1.5 rounded-full bg-blue-cp) --- */
.puce-bleue {
margin-top:.25rem; /* mt-1 */
height:.375rem; /* h-1.5 */
width:.375rem; /* w-1.5 */
border-radius:9999px; /* rounded-full */
background:#567f89; /* bg-blue-cp */
background:var(--cp-blue); /* bg-blue-cp */
}
/* --- carte__texte (ex : mt-3 text-mute leading-relaxed text-sm) --- */
.carte__texte {
margin-top:.75rem; /* mt-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- chapo (ex : mt-10 max-w-2xl text-lg text-mute leading-relaxed) --- */
.chapo {
margin-top:2.5rem; /* mt-10 */
max-width:42rem; /* max-w-2xl */
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- paragraphe-large (ex : text-lg text-mute leading-relaxed) --- */
.paragraphe-large {
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- note-attenuee (ex : text-xs text-mute) --- */
.note-attenuee {
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- texte-15 (ex : text-[15px]) --- */
.texte-15 {
font-size:15px; /* text-[15px] */
}
/* --- libelle (ex : text-sm font-medium) --- */
.libelle {
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
font-weight:500; /* font-medium */
}
/* --- extensible (ex : flex-1) --- */
.extensible {
flex:1 1; /* flex-1 */
}
/* --- grille-4-cartes (ex : mt-16 grid md:grid-cols-2 lg:grid-cols-4 gap-6) --- */
.grille-4-cartes {
margin-top:4rem; /* mt-16 */
display:grid; /* grid */
gap:1.5rem; /* gap-6 */
}
@media (min-width:768px) {
.grille-4-cartes {
grid-template-columns:repeat(2,minmax(0,1fr)); /* md:grid-cols-2 */
}
}
@media (min-width:1024px) {
.grille-4-cartes {
grid-template-columns:repeat(4,minmax(0,1fr)); /* lg:grid-cols-4 */
}
}
/* --- carte-blanche (ex : bg-white rounded-2xl p-8 h-full hover-lift) --- */
.carte-blanche {
height:100%; /* h-full */
border-radius:1rem; /* rounded-2xl */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding:2rem; /* p-8 */
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); /* hover-lift */
}
.carte-blanche:hover {
box-shadow:0 30px 60px -20px #1014182e; /* hover-lift */
transform:translateY(-6px); /* hover-lift */
}
/* --- numero-carte (ex : font-mono-cp text-xs text-blue-cp tracking-[0.24em]) --- */
.numero-carte {
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- carte__titre-petit (ex : mt-6 font-editorial text-2xl tracking-tight) --- */
.carte__titre-petit {
margin-top:1.5rem; /* mt-6 */
font-size:1.5rem; /* text-2xl */
line-height:2rem; /* text-2xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- carte__titre (ex : mt-6 font-editorial text-3xl tracking-tight) --- */
.carte__titre {
margin-top:1.5rem; /* mt-6 */
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- grille-galerie (ex : mt-16 grid grid-cols-1 md:grid-cols-6 gap-4) --- */
.grille-galerie {
margin-top:4rem; /* mt-16 */
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
gap:1rem; /* gap-4 */
}
@media (min-width:768px) {
.grille-galerie {
grid-template-columns:repeat(6,minmax(0,1fr)); /* md:grid-cols-6 */
}
}
/* --- cadre-photo-4-3 (ex : relative overflow-hidden rounded-2xl grain aspect-[4/3]) --- */
.cadre-photo-4-3 {
position:relative; /* relative */
aspect-ratio:4/3; /* aspect-[4/3] */
overflow:hidden; /* overflow-hidden */
border-radius:1rem; /* rounded-2xl */
position:relative; /* grain */
}
.cadre-photo-4-3:after {
background-image:url("data:image/svg+xml;utf8,"); /* grain */
content:""; /* grain */
inset:0; /* grain */
mix-blend-mode:multiply; /* grain */
opacity:.06; /* grain */
pointer-events:none; /* grain */
position:absolute; /* grain */
}
/* --- cadre-photo-portrait (ex : relative overflow-hidden rounded-2xl grain aspect-[4/5] md:aspect-auto md:h-full) --- */
.cadre-photo-portrait {
position:relative; /* relative */
aspect-ratio:4/5; /* aspect-[4/5] */
overflow:hidden; /* overflow-hidden */
border-radius:1rem; /* rounded-2xl */
position:relative; /* grain */
}
.cadre-photo-portrait:after {
background-image:url("data:image/svg+xml;utf8,"); /* grain */
content:""; /* grain */
inset:0; /* grain */
mix-blend-mode:multiply; /* grain */
opacity:.06; /* grain */
pointer-events:none; /* grain */
position:absolute; /* grain */
}
@media (min-width:768px) {
.cadre-photo-portrait {
aspect-ratio:auto; /* md:aspect-auto */
height:100%; /* md:h-full */
}
}
/* --- image-zoom (ex : w-full h-full object-cover transition-transform duration-[1200ms] hover:scale-105) --- */
.image-zoom {
height:100%; /* h-full */
width:100%; /* w-full */
object-fit:cover; /* object-cover */
transition-duration:.15s; /* transition-transform */
transition-property:transform; /* transition-transform */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-transform */
}
.image-zoom:hover {
--tw-scale-x:1.05; /* hover:scale-105 */
--tw-scale-y:1.05; /* hover:scale-105 */
transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); /* hover:scale-105 */
}
/* --- grille-2-centree (ex : grid md:grid-cols-2 gap-10 items-center) --- */
.grille-2-centree {
display:grid; /* grid */
align-items:center; /* items-center */
gap:2.5rem; /* gap-10 */
}
@media (min-width:768px) {
.grille-2-centree {
grid-template-columns:repeat(2,minmax(0,1fr)); /* md:grid-cols-2 */
}
}
/* --- grille-3-cartes (ex : mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6) --- */
.grille-3-cartes {
margin-top:4rem; /* mt-16 */
display:grid; /* grid */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
gap:1.5rem; /* gap-6 */
}
@media (min-width:768px) {
.grille-3-cartes {
grid-template-columns:repeat(2,minmax(0,1fr)); /* md:grid-cols-2 */
}
}
@media (min-width:1024px) {
.grille-3-cartes {
grid-template-columns:repeat(3,minmax(0,1fr)); /* lg:grid-cols-3 */
}
}
/* --- pastille-bleue (ex : w-12 h-12 rounded-full bg-blue-cp/10 text-blue-cp inline-flex items-center justify-center) --- */
.pastille-bleue {
display:inline-flex; /* inline-flex */
height:3rem; /* h-12 */
width:3rem; /* w-12 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- cadre-photo-4-5 (ex : relative rounded-2xl overflow-hidden aspect-[4/5] grain) --- */
.cadre-photo-4-5 {
position:relative; /* relative */
aspect-ratio:4/5; /* aspect-[4/5] */
overflow:hidden; /* overflow-hidden */
border-radius:1rem; /* rounded-2xl */
position:relative; /* grain */
}
.cadre-photo-4-5:after {
background-image:url("data:image/svg+xml;utf8,"); /* grain */
content:""; /* grain */
inset:0; /* grain */
mix-blend-mode:multiply; /* grain */
opacity:.06; /* grain */
pointer-events:none; /* grain */
position:absolute; /* grain */
}
/* --- empilement-6 (ex : mt-8 space-y-6) --- */
.empilement-6 {
margin-top:2rem; /* mt-8 */
}
.empilement-6>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-6 */
margin-bottom:calc(1.5rem*var(--tw-space-y-reverse)); /* space-y-6 */
margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse))); /* space-y-6 */
}
/* --- ligne-benefice (ex : grid grid-cols-3 border-b border-line pb-6) --- */
.ligne-benefice {
display:grid; /* grid */
grid-template-columns:repeat(3,minmax(0,1fr)); /* grid-cols-3 */
border-bottom-width:1px; /* border-b */
padding-bottom:1.5rem; /* pb-6 */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
/* --- ligne-benefice__texte (ex : col-span-2 text-lg text-ink/85) --- */
.ligne-benefice__texte {
grid-column:span 2/span 2; /* col-span-2 */
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
}
/* --- grille-3 (ex : grid md:grid-cols-3 gap-y-10 md:gap-x-8) --- */
.grille-3 {
display:grid; /* grid */
row-gap:2.5rem; /* gap-y-10 */
}
@media (min-width:768px) {
.grille-3 {
grid-template-columns:repeat(3,minmax(0,1fr)); /* md:grid-cols-3 */
column-gap:2rem; /* md:gap-x-8 */
}
}
/* --- bloc-chiffre (ex : border-t border-ink/15 pt-5) --- */
.bloc-chiffre {
border-top-width:1px; /* border-t */
padding-top:1.25rem; /* pt-5 */
text-align:center; /* chiffre + légende centrés dans la colonne */
}
/* --- bloc-chiffre__valeur (ex : font-editorial text-6xl md:text-7xl tracking-tight) --- */
.bloc-chiffre__valeur {
font-size:3.75rem; /* text-6xl */
line-height:1; /* text-6xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.bloc-chiffre__valeur {
font-size:4.5rem; /* md:text-7xl */
line-height:1; /* md:text-7xl */
}
}
/* --- bloc-chiffre__legende (ex : mt-3 text-mute) --- */
.bloc-chiffre__legende {
margin-top:.75rem; /* mt-3 */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- groupe-boutons-simple (ex : flex gap-3) --- */
.groupe-boutons-simple {
display:flex; /* flex */
gap:.75rem; /* gap-3 */
}
/* --- chronologie (ex : mt-20 relative) --- */
.chronologie {
position:relative; /* relative */
margin-top:5rem; /* mt-20 */
}
/* --- chronologie__ligne (ex : absolute left-[11px] md:left-[15px] top-0 bottom-0 w-px bg-ink/15) --- */
.chronologie__ligne {
position:absolute; /* absolute */
bottom:0; /* bottom-0 */
left:11px; /* left-[11px] */
top:0; /* top-0 */
width:1px; /* w-px */
}
@media (min-width:768px) {
.chronologie__ligne {
left:15px; /* md:left-[15px] */
}
}
/* --- chronologie__liste (ex : space-y-14) --- */
.chronologie__liste>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-14 */
margin-bottom:calc(3.5rem*var(--tw-space-y-reverse)); /* space-y-14 */
margin-top:calc(3.5rem*(1 - var(--tw-space-y-reverse))); /* space-y-14 */
}
/* --- chronologie__etape (ex : pl-10 md:pl-14 relative) --- */
.chronologie__etape {
position:relative; /* relative */
padding-left:2.5rem; /* pl-10 */
}
@media (min-width:768px) {
.chronologie__etape {
padding-left:3.5rem; /* md:pl-14 */
}
}
/* --- chronologie__point (ex : absolute left-0 top-1.5 w-6 h-6 rounded-full bg-white border border-blue-cp flex items-center justify-center) --- */
.chronologie__point {
position:absolute; /* absolute */
left:0; /* left-0 */
top:.375rem; /* top-1.5 */
display:flex; /* flex */
height:1.5rem; /* h-6 */
width:1.5rem; /* w-6 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
}
/* --- point-bleu (ex : w-2 h-2 rounded-full bg-blue-cp) --- */
.point-bleu {
height:.5rem; /* h-2 */
width:.5rem; /* w-2 */
border-radius:9999px; /* rounded-full */
background:#567f89; /* bg-blue-cp */
background:var(--cp-blue); /* bg-blue-cp */
}
/* --- chronologie__titre (ex : mt-2 font-editorial text-3xl md:text-4xl tracking-tight) --- */
.chronologie__titre {
margin-top:.5rem; /* mt-2 */
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.chronologie__titre {
font-size:2.25rem; /* md:text-4xl */
line-height:2.5rem; /* md:text-4xl */
}
}
/* --- grille-2-cartes (ex : mt-16 grid md:grid-cols-2 gap-6) --- */
.grille-2-cartes {
margin-top:4rem; /* mt-16 */
display:grid; /* grid */
gap:1.5rem; /* gap-6 */
}
@media (min-width:768px) {
.grille-2-cartes {
grid-template-columns:repeat(2,minmax(0,1fr)); /* md:grid-cols-2 */
grid-auto-rows:1fr; /* toutes les cartes à la même hauteur */
}
}
/* cartes de hauteur égale : chaque carte remplit toute sa cellule */
.grille-2-cartes > [data-apparition] {
display:grid;
}
/* --- carte-beige (ex : bg-beige rounded-2xl p-8 md:p-10 hover-lift) --- */
.carte-beige {
border-radius:1rem; /* rounded-2xl */
padding:2rem; /* p-8 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); /* hover-lift */
}
.carte-beige:hover {
box-shadow:0 30px 60px -20px #1014182e; /* hover-lift */
transform:translateY(-6px); /* hover-lift */
}
@media (min-width:768px) {
.carte-beige {
padding:2.5rem; /* md:p-10 */
}
}
/* --- pastille-sombre (ex : w-12 h-12 rounded-full bg-ink text-white inline-flex items-center justify-center) --- */
.pastille-sombre {
display:inline-flex; /* inline-flex */
height:3rem; /* h-12 */
width:3rem; /* w-12 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- groupe-boutons-bas (ex : mt-10 flex gap-3) --- */
.groupe-boutons-bas {
margin-top:2.5rem; /* mt-10 */
display:flex; /* flex */
gap:.75rem; /* gap-3 */
}
/* --- grille-adhesion (ex : grid lg:grid-cols-12 gap-10) --- */
.grille-adhesion {
display:grid; /* grid */
gap:2.5rem; /* gap-10 */
}
@media (min-width:1024px) {
.grille-adhesion {
grid-template-columns:repeat(12,minmax(0,1fr)); /* lg:grid-cols-12 */
}
}
/* --- colonne-lg-5 (ex : lg:col-span-5) --- */
@media (min-width:1024px) {
.colonne-lg-5 {
grid-column:span 5/span 5; /* lg:col-span-5 */
}
}
/* --- colonne-lg-7 (ex : lg:col-span-7) --- */
@media (min-width:1024px) {
.colonne-lg-7 {
grid-column:span 7/span 7; /* lg:col-span-7 */
}
}
/* --- carte-beige-fixe (ex : bg-beige rounded-2xl p-8 md:p-10) --- */
.carte-beige-fixe {
border-radius:1rem; /* rounded-2xl */
padding:2rem; /* p-8 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
}
@media (min-width:768px) {
.carte-beige-fixe {
padding:2.5rem; /* md:p-10 */
}
}
/* --- prix-adhesion (ex : mt-4 font-editorial text-6xl md:text-7xl tracking-tight text-ink) --- */
.prix-adhesion {
margin-top:1rem; /* mt-4 */
font-size:3.75rem; /* text-6xl */
line-height:1; /* text-6xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
color:#101418; /* text-ink */
color:var(--cp-ink); /* text-ink */
}
@media (min-width:768px) {
.prix-adhesion {
font-size:4.5rem; /* md:text-7xl */
line-height:1; /* md:text-7xl */
}
}
/* --- note-sous-prix (ex : text-mute text-sm mt-2) --- */
.note-sous-prix {
margin-top:.5rem; /* mt-2 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- liste-avantages (ex : mt-8 space-y-4) --- */
.liste-avantages {
margin-top:2rem; /* mt-8 */
}
.liste-avantages>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-4 */
margin-bottom:calc(1rem*var(--tw-space-y-reverse)); /* space-y-4 */
margin-top:calc(1rem*(1 - var(--tw-space-y-reverse))); /* space-y-4 */
}
/* --- puce-coche (ex : mt-1 w-5 h-5 rounded-full bg-blue-cp text-white flex items-center justify-center shrink-0) --- */
.puce-coche {
margin-top:.25rem; /* mt-1 */
display:flex; /* flex */
height:1.25rem; /* h-5 */
width:1.25rem; /* w-5 */
flex-shrink:0; /* shrink-0 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#567f89; /* bg-blue-cp */
background:var(--cp-blue); /* bg-blue-cp */
}
/* --- carte-citation-sombre (ex : mt-6 bg-ink text-white rounded-2xl p-8) --- */
.carte-citation-sombre {
margin-top:1.5rem; /* mt-6 */
border-radius:1rem; /* rounded-2xl */
padding:2rem; /* p-8 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- citation-sombre (ex : mt-4 font-editorial text-3xl leading-[1.15] text-balance) --- */
.citation-sombre {
margin-top:1rem; /* mt-4 */
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
line-height:1.15; /* leading-[1.15] */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
text-wrap:balance; /* text-balance */
}
/* --- citation-sombre__auteur (ex : mt-4 text-white/70 text-sm leading-relaxed) --- */
.citation-sombre__auteur {
margin-top:1rem; /* mt-4 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
line-height:1.625; /* leading-relaxed */
color:#ffffffb3; /* text-white/70 */
}
/* --- carte-formulaire (ex : bg-white border border-line rounded-2xl p-8 md:p-10) --- */
.carte-formulaire {
border-radius:1rem; /* rounded-2xl */
border-width:1px; /* border */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding:2rem; /* p-8 */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
@media (min-width:768px) {
.carte-formulaire {
padding:2.5rem; /* md:p-10 */
}
}
/* --- titre-formulaire (ex : mt-4 font-editorial text-4xl md:text-5xl tracking-tight leading-[1]) --- */
.titre-formulaire {
margin-top:1rem; /* mt-4 */
font-size:2.25rem; /* text-4xl */
line-height:2.5rem; /* text-4xl */
line-height:1; /* leading-[1] */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.titre-formulaire {
font-size:3rem; /* md:text-5xl */
line-height:1; /* md:text-5xl */
}
}
/* --- sous-titre-formulaire (ex : mt-4 text-mute) --- */
.sous-titre-formulaire {
margin-top:1rem; /* mt-4 */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- formulaire (ex : mt-10 space-y-5) --- */
.formulaire {
margin-top:2.5rem; /* mt-10 */
}
.formulaire>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-5 */
margin-bottom:calc(1.25rem*var(--tw-space-y-reverse)); /* space-y-5 */
margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse))); /* space-y-5 */
}
/* --- formulaire__deux-colonnes (ex : grid md:grid-cols-2 gap-5) --- */
.formulaire__deux-colonnes {
display:grid; /* grid */
gap:1.25rem; /* gap-5 */
}
@media (min-width:768px) {
.formulaire__deux-colonnes {
grid-template-columns:repeat(2,minmax(0,1fr)); /* md:grid-cols-2 */
}
}
/* --- champ-formulaire (ex : mt-2 w-full bg-white border border-line rounded-full px-4 py-3 text-[15px] focus:outline-none focus:border-ink transition-colors) --- */
.champ-formulaire {
margin-top:.5rem; /* mt-2 */
width:100%; /* w-full */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-left:1rem; /* px-4 */
padding-right:1rem; /* px-4 */
padding-bottom:.75rem; /* py-3 */
padding-top:.75rem; /* py-3 */
font-size:15px; /* text-[15px] */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
.champ-formulaire:focus {
outline:2px solid #0000; /* focus:outline-none */
outline-offset:2px; /* focus:outline-none */
}
/* --- zone-texte-formulaire (ex : mt-2 w-full bg-white border border-line rounded-2xl px-4 py-3 text-[15px] focus:outline-none focus:border-ink transition-colors) --- */
.zone-texte-formulaire {
margin-top:.5rem; /* mt-2 */
width:100%; /* w-full */
border-radius:1rem; /* rounded-2xl */
border-width:1px; /* border */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding-left:1rem; /* px-4 */
padding-right:1rem; /* px-4 */
padding-bottom:.75rem; /* py-3 */
padding-top:.75rem; /* py-3 */
font-size:15px; /* text-[15px] */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
.zone-texte-formulaire:focus {
outline:2px solid #0000; /* focus:outline-none */
outline-offset:2px; /* focus:outline-none */
}
/* --- filtres (ex : flex flex-wrap gap-2) --- */
.filtres {
display:flex; /* flex */
flex-wrap:wrap; /* flex-wrap */
gap:.5rem; /* gap-2 */
}
/* --- liste-evenements (ex : relative border-t border-ink/15) --- */
.liste-evenements {
position:relative; /* relative */
border-top-width:1px; /* border-t */
}
/* --- carte-evenement (ex : grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-8 items-baseline py-8 md:py-10 border-b border-ink/15 cursor-pointer) --- */
.carte-evenement {
display:grid; /* grid */
cursor:pointer; /* cursor-pointer */
grid-template-columns:repeat(1,minmax(0,1fr)); /* grid-cols-1 */
align-items:baseline; /* items-baseline */
gap:1rem; /* gap-4 */
border-bottom-width:1px; /* border-b */
padding-bottom:2rem; /* py-8 */
padding-top:2rem; /* py-8 */
}
@media (min-width:768px) {
.carte-evenement {
grid-template-columns:repeat(12,minmax(0,1fr)); /* md:grid-cols-12 */
gap:2rem; /* md:gap-8 */
padding-bottom:2.5rem; /* md:py-10 */
padding-top:2.5rem; /* md:py-10 */
}
}
/* --- carte-evenement__date (ex : md:col-span-2 font-mono-cp text-xs text-blue-cp tracking-[0.24em] uppercase) --- */
.carte-evenement__date {
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
@media (min-width:768px) {
.carte-evenement__date {
grid-column:span 2/span 2; /* md:col-span-2 */
}
}
/* --- carte-evenement__titre (ex : font-editorial text-3xl md:text-5xl tracking-tight leading-[1.05] group-hover:italic group-hover:text-blue-cp transition-colors) --- */
.carte-evenement__titre {
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
line-height:1.05; /* leading-[1.05] */
letter-spacing:-.025em; /* tracking-tight */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
.groupe:hover .carte-evenement__titre {
font-style:italic; /* group-hover:italic */
color:#567f89; /* group-hover:text-blue-cp */
color:var(--cp-blue); /* group-hover:text-blue-cp */
}
@media (min-width:768px) {
.carte-evenement__titre {
font-size:2.25rem; /* réduit (avant 3rem) pour tenir sur une ligne */
line-height:1.1;
}
}
/* --- carte-evenement__lieu (ex : md:col-span-3 flex items-center gap-4 text-sm text-mute) --- */
.carte-evenement__lieu {
display:flex; /* flex */
align-items:center; /* items-center */
gap:1rem; /* gap-4 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
@media (min-width:768px) {
.carte-evenement__lieu {
grid-column:span 3/span 3; /* md:col-span-3 */
}
}
/* --- carte-evenement__action (ex : md:col-span-1 flex md:justify-end) --- */
.carte-evenement__action {
display:flex; /* flex */
}
@media (min-width:768px) {
.carte-evenement__action {
grid-column:span 1/span 1; /* md:col-span-1 */
justify-content:flex-end; /* md:justify-end */
}
}
/* événements : date (numérotation) retirée + colonne du titre élargie */
.carte-evenement__date {
display:none;
}
@media (min-width:768px) {
.carte-evenement .colonne-6 {
grid-column:span 8/span 8;
}
}
/* --- carte-evenement__fleche (ex : w-11 h-11 rounded-full border border-line group-hover:bg-ink group-hover:text-white group-hover:border-ink flex items-center justify-center transition-colors) --- */
.carte-evenement__fleche {
display:flex; /* flex */
height:2.75rem; /* h-11 */
width:2.75rem; /* w-11 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
border-width:1px; /* border */
transition-duration:.15s; /* transition-colors */
transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; /* transition-colors */
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color; /* transition-colors */
transition-timing-function:cubic-bezier(.4,0,.2,1); /* transition-colors */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
.groupe:hover .carte-evenement__fleche {
--tw-text-opacity:1; /* group-hover:text-white */
color:#fff; /* group-hover:text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* group-hover:text-white */
background:#101418; /* group-hover:bg-ink */
background:var(--cp-ink); /* group-hover:bg-ink */
}
/* --- bloc-icone-texte (ex : flex items-start gap-6) --- */
.bloc-icone-texte {
display:flex; /* flex */
align-items:flex-start; /* items-start */
gap:1.5rem; /* gap-6 */
}
/* grande icône décorative à droite de la section garantie (zone vide) */
.icone-garantie-deco {
display:none;
margin-left:auto;
align-self:center;
flex-shrink:0;
color:var(--cp-blue);
opacity:.9;
}
@media (min-width:768px) {
.icone-garantie-deco {
display:block;
}
}
/* --- texte-info-pratique (ex : font-editorial text-2xl md:text-3xl leading-[1.25] max-w-3xl text-balance) --- */
.texte-info-pratique {
max-width:48rem; /* max-w-3xl */
font-size:1.5rem; /* text-2xl */
line-height:2rem; /* text-2xl */
line-height:1.25; /* leading-[1.25] */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
text-wrap:balance; /* text-balance */
}
@media (min-width:768px) {
.texte-info-pratique {
font-size:1.875rem; /* md:text-3xl */
line-height:2.25rem; /* md:text-3xl */
}
}
/* --- grille-2-large (ex : grid lg:grid-cols-2 gap-12 items-center) --- */
.grille-2-large {
display:grid; /* grid */
align-items:center; /* items-center */
gap:3rem; /* gap-12 */
}
@media (min-width:1024px) {
.grille-2-large {
grid-template-columns:repeat(2,minmax(0,1fr)); /* lg:grid-cols-2 */
}
}
/* --- badge-bleu (ex : text-[10px] font-mono-cp bg-blue-cp/10 text-blue-cp px-2.5 py-1 rounded-full uppercase tracking-[0.24em]) --- */
.badge-bleu {
border-radius:9999px; /* rounded-full */
padding-left:.625rem; /* px-2.5 */
padding-right:.625rem; /* px-2.5 */
padding-bottom:.25rem; /* py-1 */
padding-top:.25rem; /* py-1 */
font-size:10px; /* text-[10px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- badge-bleu-petit (ex : text-[10px] font-mono-cp bg-blue-cp/10 text-blue-cp px-2 py-1 rounded-full) --- */
.badge-bleu-petit {
border-radius:9999px; /* rounded-full */
padding-left:.5rem; /* px-2 */
padding-right:.5rem; /* px-2 */
padding-bottom:.25rem; /* py-1 */
padding-top:.25rem; /* py-1 */
font-size:10px; /* text-[10px] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- badge-rose (ex : text-[10px] font-mono-cp bg-rose-cp/25 text-[#a8544d] px-2.5 py-1 rounded-full uppercase tracking-[0.24em]) --- */
.badge-rose {
border-radius:9999px; /* rounded-full */
padding-left:.625rem; /* px-2.5 */
padding-right:.625rem; /* px-2.5 */
padding-bottom:.25rem; /* py-1 */
padding-top:.25rem; /* py-1 */
font-size:10px; /* text-[10px] */
text-transform:uppercase; /* uppercase */
letter-spacing:.24em; /* tracking-[0.24em] */
--tw-text-opacity:1; /* text-[#a8544d] */
color:#a8544d; /* text-[#a8544d] */
color:rgb(168 84 77/var(--tw-text-opacity,1)); /* text-[#a8544d] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
}
/* --- badge-rose-petit (ex : text-[10px] font-mono-cp bg-rose-cp/20 text-rose-cp px-2 py-1 rounded-full) --- */
.badge-rose-petit {
border-radius:9999px; /* rounded-full */
padding-left:.5rem; /* px-2 */
padding-right:.5rem; /* px-2 */
padding-bottom:.25rem; /* py-1 */
padding-top:.25rem; /* py-1 */
font-size:10px; /* text-[10px] */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#f5a9a3; /* text-rose-cp */
color:var(--cp-rose); /* text-rose-cp */
}
/* --- paragraphe-produit (ex : mt-6 text-lg text-mute leading-relaxed max-w-lg) --- */
.paragraphe-produit {
margin-top:1.5rem; /* mt-6 */
max-width:32rem; /* max-w-lg */
font-size:1.125rem; /* text-lg */
line-height:1.75rem; /* text-lg */
line-height:1.625; /* leading-relaxed */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- liste-coches (ex : mt-8 space-y-3) --- */
.liste-coches {
margin-top:2rem; /* mt-8 */
}
.liste-coches>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-3 */
margin-bottom:calc(.75rem*var(--tw-space-y-reverse)); /* space-y-3 */
margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse))); /* space-y-3 */
}
/* --- liste-coches__item (ex : flex items-center gap-3 text-[15px]) --- */
.liste-coches__item {
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
font-size:15px; /* text-[15px] */
}
/* --- bloc-prix (ex : mt-10 flex items-end justify-between border-t border-ink/15 pt-6 max-w-md) --- */
.bloc-prix {
margin-top:2.5rem; /* mt-10 */
display:flex; /* flex */
max-width:28rem; /* max-w-md */
align-items:flex-end; /* items-end */
justify-content:space-between; /* justify-between */
border-top-width:1px; /* border-t */
padding-top:1.5rem; /* pt-6 */
}
/* --- prix-grand (ex : font-editorial text-6xl tracking-tight) --- */
.prix-grand {
font-size:3.75rem; /* text-6xl */
line-height:1; /* text-6xl */
letter-spacing:-.025em; /* tracking-tight */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- prix__unite (ex : text-2xl text-mute font-body) --- */
.prix__unite {
font-size:1.5rem; /* text-2xl */
line-height:2rem; /* text-2xl */
font-family:Manrope,ui-sans-serif,system-ui,sans-serif; /* font-body */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- mention-bleue (ex : mt-2 text-sm text-blue-cp font-medium) --- */
.mention-bleue {
margin-top:.5rem; /* mt-2 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
font-weight:500; /* font-medium */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- panneau-demo (ex : bg-white rounded-2xl p-6 md:p-8 shadow-[0_40px_100px_-40px_rgba(16,20,24,0.25)]) --- */
.panneau-demo {
border-radius:1rem; /* rounded-2xl */
--tw-bg-opacity:1; /* bg-white */
background-color:#fff; /* bg-white */
background-color:rgb(255 255 255/var(--tw-bg-opacity,1)); /* bg-white */
padding:1.5rem; /* p-6 */
--tw-shadow:0 40px 100px -40px #10141840; /* shadow-[0_40px_100px_-40px_rgba(16,20,24,0.25)] */
--tw-shadow-colored:0 40px 100px -40px var(--tw-shadow-color); /* shadow-[0_40px_100px_-40px_rgba(16,20,24,0.25)] */
box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow); /* shadow-[0_40px_100px_-40px_rgba(16,20,24,0.25)] */
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); /* shadow-[0_40px_100px_-40px_rgba(16,20,24,0.25)] */
}
@media (min-width:768px) {
.panneau-demo {
padding:2rem; /* md:p-8 */
}
}
/* --- panneau-demo__entete (ex : flex items-center justify-between mb-6) --- */
.panneau-demo__entete {
margin-bottom:1.5rem; /* mb-6 */
display:flex; /* flex */
align-items:center; /* items-center */
justify-content:space-between; /* justify-between */
}
/* --- barre-bleue (ex : w-1.5 h-8 rounded-full bg-blue-cp) --- */
.barre-bleue {
height:2rem; /* h-8 */
width:.375rem; /* w-1.5 */
border-radius:9999px; /* rounded-full */
background:#567f89; /* bg-blue-cp */
background:var(--cp-blue); /* bg-blue-cp */
}
/* --- barre-sombre (ex : w-1.5 h-8 rounded-full bg-ink) --- */
.barre-sombre {
height:2rem; /* h-8 */
width:.375rem; /* w-1.5 */
border-radius:9999px; /* rounded-full */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- barre-rose (ex : w-1.5 h-8 rounded-full bg-rose-cp) --- */
.barre-rose {
height:2rem; /* h-8 */
width:.375rem; /* w-1.5 */
border-radius:9999px; /* rounded-full */
background:#f5a9a3; /* bg-rose-cp */
background:var(--cp-rose); /* bg-rose-cp */
}
/* --- ligne-stat (ex : flex items-center gap-3 text-sm) --- */
.ligne-stat {
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
}
/* --- pastille-sombre-petite (ex : w-9 h-9 rounded-full bg-ink text-white inline-flex items-center justify-center) --- */
.pastille-sombre-petite {
display:inline-flex; /* inline-flex */
height:2.25rem; /* h-9 */
width:2.25rem; /* w-9 */
align-items:center; /* items-center */
justify-content:center; /* justify-center */
border-radius:9999px; /* rounded-full */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- valeur-stat (ex : font-editorial text-2xl mt-1) --- */
.valeur-stat {
margin-top:.25rem; /* mt-1 */
font-size:1.5rem; /* text-2xl */
line-height:2rem; /* text-2xl */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
/* --- ligne-tableau (ex : flex items-center gap-3 py-2 border-b border-line last:border-0) --- */
.ligne-tableau {
display:flex; /* flex */
align-items:center; /* items-center */
gap:.75rem; /* gap-3 */
border-bottom-width:1px; /* border-b */
padding-bottom:.5rem; /* py-2 */
padding-top:.5rem; /* py-2 */
border-color:#10141814; /* border-line */
border-color:var(--cp-line); /* border-line */
}
.ligne-tableau:last-child {
border-width:0; /* last:border-0 */
}
/* --- ligne-tableau__heure (ex : font-mono-cp text-xs text-mute w-12) --- */
.ligne-tableau__heure {
width:3rem; /* w-12 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
font-family:JetBrains Mono,ui-monospace,monospace; /* font-mono-cp */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- tuile-beige (ex : bg-beige rounded-xl p-4) --- */
.tuile-beige {
border-radius:.75rem; /* rounded-xl */
padding:1rem; /* p-4 */
background:#f6f2ea; /* bg-beige */
background:var(--cp-beige); /* bg-beige */
}
/* --- note-bleue (ex : text-xs text-blue-cp mt-1) --- */
.note-bleue {
margin-top:.25rem; /* mt-1 */
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
color:#567f89; /* text-blue-cp */
color:var(--cp-blue); /* text-blue-cp */
}
/* --- grille-tuiles (ex : grid grid-cols-3 gap-3) --- */
.grille-tuiles {
display:grid; /* grid */
grid-template-columns:repeat(3,minmax(0,1fr)); /* grid-cols-3 */
gap:.75rem; /* gap-3 */
}
/* --- tuile-sombre (ex : mt-4 bg-ink rounded-xl p-4 text-white) --- */
.tuile-sombre {
margin-top:1rem; /* mt-4 */
border-radius:.75rem; /* rounded-xl */
padding:1rem; /* p-4 */
--tw-text-opacity:1; /* text-white */
color:#fff; /* text-white */
color:rgb(255 255 255/var(--tw-text-opacity,1)); /* text-white */
background:#101418; /* bg-ink */
background:var(--cp-ink); /* bg-ink */
}
/* --- note-blanche (ex : text-xs text-white/60) --- */
.note-blanche {
font-size:.75rem; /* text-xs */
line-height:1rem; /* text-xs */
color:#fff9; /* text-white/60 */
}
/* --- graphique (ex : mt-3 h-24 flex items-end gap-1.5) --- */
.graphique {
margin-top:.75rem; /* mt-3 */
display:flex; /* flex */
height:6rem; /* h-24 */
align-items:flex-end; /* items-end */
gap:.375rem; /* gap-1.5 */
}
/* --- graphique__barre (ex : flex-1 rounded-t-sm bg-white/70) --- */
.graphique__barre {
flex:1 1; /* flex-1 */
border-top-right-radius:calc(.5rem - 4px); /* rounded-t-sm */
border-top-right-radius:calc(var(--radius) - 4px); /* rounded-t-sm */
border-top-left-radius:calc(.5rem - 4px); /* rounded-t-sm */
border-top-left-radius:calc(var(--radius) - 4px); /* rounded-t-sm */
background-color:#ffffffb3; /* bg-white/70 */
}
/* --- graphique__barre-rose (ex : flex-1 rounded-t-sm bg-rose-cp) --- */
.graphique__barre-rose {
flex:1 1; /* flex-1 */
border-top-right-radius:calc(.5rem - 4px); /* rounded-t-sm */
border-top-right-radius:calc(var(--radius) - 4px); /* rounded-t-sm */
border-top-left-radius:calc(.5rem - 4px); /* rounded-t-sm */
border-top-left-radius:calc(var(--radius) - 4px); /* rounded-t-sm */
background:#f5a9a3; /* bg-rose-cp */
background:var(--cp-rose); /* bg-rose-cp */
}
/* --- ordre-1-large (ex : lg:order-1) --- */
@media (min-width:1024px) {
.ordre-1-large {
order:1; /* lg:order-1 */
}
}
/* --- ordre-2-large (ex : lg:order-2) --- */
@media (min-width:1024px) {
.ordre-2-large {
order:2; /* lg:order-2 */
}
}
/* --- grille-fonctions (ex : mt-8 grid grid-cols-2 gap-4 max-w-md) --- */
.grille-fonctions {
margin-top:2rem; /* mt-8 */
display:grid; /* grid */
max-width:28rem; /* max-w-md */
grid-template-columns:repeat(2,minmax(0,1fr)); /* grid-cols-2 */
gap:1rem; /* gap-4 */
}
/* --- note-fonction (ex : mt-2 text-sm text-mute) --- */
.note-fonction {
margin-top:.5rem; /* mt-2 */
font-size:.875rem; /* text-sm */
line-height:1.25rem; /* text-sm */
color:#6b7378; /* text-mute */
color:var(--cp-mute); /* text-mute */
}
/* --- empilement-2 (ex : space-y-2) --- */
.empilement-2>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0; /* space-y-2 */
margin-bottom:calc(.5rem*var(--tw-space-y-reverse)); /* space-y-2 */
margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse))); /* space-y-2 */
}
/* --- texte-garantie (ex : mt-3 font-editorial text-3xl md:text-4xl leading-[1.15] max-w-3xl) --- */
.texte-garantie {
margin-top:.75rem; /* mt-3 */
max-width:48rem; /* max-w-3xl */
font-size:1.875rem; /* text-3xl */
line-height:2.25rem; /* text-3xl */
line-height:1.15; /* leading-[1.15] */
font-family:Fraunces,Playfair Display,Georgia,serif; /* font-editorial */
}
@media (min-width:768px) {
.texte-garantie {
font-size:2.25rem; /* md:text-4xl */
line-height:2.5rem; /* md:text-4xl */
}
}
/* ================== contenu de complements.css ==================== */
/* ------------------------------------------------------------------
Coopéré — compléments.
Ce fichier ne redéfinit RIEN de main.css : il ajoute uniquement les
règles nécessaires pour remplacer ce que React et Framer Motion
faisaient auparavant en JavaScript.
------------------------------------------------------------------ */
/* --- En-tête compactée au défilement -------------------------------
Reproduit la bascule que faisait React : py-5 -> py-3 sur l'en-tête,
et bg-transparent -> glass sur la barre intérieure. */
header.entete--reduite {
padding-top: .75rem;
padding-bottom: .75rem;
}
header.entete--reduite > div {
backdrop-filter: saturate(160%) blur(18px);
-webkit-backdrop-filter: saturate(160%) blur(18px);
background: #ffffffb8;
border: 1px solid #ffffff80;
box-shadow: 0 8px 32px #1014180f;
}
/* --- Apparition des blocs au défilement ----------------------------
Remplace Framer Motion. L'état masqué n'est appliqué que si le
JavaScript est actif : sans lui, tout reste visible. */
html.js [data-apparition] {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
transform .8s cubic-bezier(.22, 1, .36, 1);
will-change: opacity, transform;
}
html.js [data-apparition].est-visible {
opacity: 1;
transform: none;
}
/* --- Menu mobile ---------------------------------------------------- */
#menu-mobile[hidden] { display: none; }
/* --- Filtres de la page Événements ----------------------------------
Reprend exactement l'aspect du bouton actif du site actuel. */
button.filtre--actif {
background-color: #101418;
background-color: var(--cp-ink);
color: #fff;
border-color: #101418;
border-color: var(--cp-ink);
}
[data-categorie][hidden] { display: none; }
/* --- Formulaire d'adhésion ------------------------------------------ */
.formulaire-confirmation {
margin-top: 1rem;
padding: .875rem 1.125rem;
border-radius: 1rem;
background: #567f8914;
color: #567f89;
color: var(--cp-blue);
font-size: .9375rem;
line-height: 1.5;
}
/* --- Respect des préférences système -------------------------------- */
@media (prefers-reduced-motion: reduce) {
html.js [data-apparition] { opacity: 1; transform: none; transition: none; }
}
/* --- Carte « Univers 02 » de l'accueil -------------------------------
La carte fait 260 px ; le titre et sa légende, ancrés en bas,
occupent 131 -> 228 px. Le bandeau au logo est donc borné en haut,
ce qui rend tout chevauchement impossible.
Écrit en CSS explicite : les utilitaires Tailwind équivalents
(left-4, md:top-6, h-[84px]…) n'existent pas dans main.css. */
.univers02-bandeau {
position: absolute;
left: 1rem;
right: 1rem;
top: 1rem;
height: 84px;
overflow: hidden;
}
@media (min-width: 768px) {
.univers02-bandeau { left: 1.5rem; right: 1.5rem; top: 1.5rem; }
}
.univers02-bandeau > div { justify-content: flex-start; }
.univers02-logo {
height: 44px;
width: auto;
object-fit: contain;
opacity: .9;
transform: translateX(-100px);
}
/* --- Pages éditoriales (mentions légales, RGPD, contact) -------------
Ces pages n'existaient pas dans l'application React : leurs règles
sont écrites ici plutôt que de dépendre d'utilitaires Tailwind
absents du build figé (space-y-10, underline). */
.contenu-editorial > * + * { margin-top: 2.5rem; }
.contenu-editorial a { text-decoration: underline; text-underline-offset: 2px; }
.contenu-editorial a:hover { color: #567f89; color: var(--cp-blue); }
/* ==================================================================
Animations restaurées de la version React (Framer Motion + Lenis)
Pilotées par js/site.js ; sans JavaScript, tout reste visible.
Valeurs reprises du bundle React d'origine :
- révélation au défilement : montée 40 px, 0,9 s, cascade 0,08 s
- titres mot à mot : montée 110 %, 0,9 s, 0,06 s par mot
- séquence héros : en-tête 0,1 s → badge 0,2 s → chapo 1 s → boutons 1,2 s
================================================================== */
/* --- Révélation au défilement : réglages de la version React ------ */
html.js [data-apparition] {
transform: translateY(40px);
transition-duration: .9s;
}
/* --- Titres révélés mot à mot (ex-composant React) ---------------- */
html.js .mot-revele > span {
transform: translateY(130%);
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
transition-delay: var(--delai, 0s);
will-change: transform;
}
html.js.titres-prets .mot-revele > span { transform: none; }
/* --- Séquence d'entrée du héros (accueil) ------------------------- */
html.js header.entete[data-apparition] { transition-delay: .1s; }
html.js header.entete[data-apparition]:not(.est-visible) { transform: translateY(-40px); }
html.js .heros__badge[data-apparition] { transition-delay: .2s; }
html.js .heros__chapo[data-apparition] { transition-delay: 1s; }
html.js .heros__chapo[data-apparition]:not(.est-visible) { transform: translateY(30px); }
html.js .groupe-boutons-heros[data-apparition] { transition-delay: 1.2s; }
/* --- Parallaxe de l'image du héros (pilotée par site.js) ---------- */
[data-parallaxe-heros] { will-change: transform, opacity; }
/* --- Menu mobile : fondu du panneau, liens en cascade ------------- */
#menu-mobile { opacity: 0; transition: opacity .3s ease; }
#menu-mobile.est-ouvert { opacity: 1; }
html.js #menu-mobile [data-apparition] {
transform: translateY(20px);
transition-duration: .5s;
}
html.js #menu-mobile [data-apparition].est-visible { transform: none; }
/* --- Filtres de la page Événements : cartes entrantes ------------- */
@keyframes carte-entrante {
from { opacity: 0; transform: translateY(20px); }
}
.carte--entrante {
animation: carte-entrante .5s cubic-bezier(.22, 1, .36, 1) both;
}
/* --- Confirmation du formulaire d'adhésion ------------------------ */
@keyframes confirmation-entrante {
from { opacity: 0; transform: translateY(10px); }
}
.formulaire-confirmation {
animation: confirmation-entrante .5s cubic-bezier(.22, 1, .36, 1);
}
/* --- Respect des préférences système ------------------------------ */
@media (prefers-reduced-motion: reduce) {
html.js [data-apparition],
html.js header.entete[data-apparition]:not(.est-visible),
html.js .heros__chapo[data-apparition]:not(.est-visible) {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
html.js .mot-revele > span { transform: none !important; transition: none !important; }
#menu-mobile { transition: none; }
#menu-mobile.est-ouvert { opacity: 1; }
.carte--entrante, .formulaire-confirmation { animation: none !important; }
}