/* ====================================================================
COPAINS POILUS — RESPONSIVE DESKTOP
responsive-desktop.css — v1.0
====================================================================
Fichier de surcharge desktop uniquement.
Ce fichier NE MODIFIE PAS le mobile ni la tablette.
Il s'applique uniquement à partir de 1280px (laptops, desktops, 27").
PRINCIPE :
• Toutes les règles sont dans des blocs @media (min-width: …)
• Aucune règle "nue" (hors media query) dans ce fichier
• Le fichier doit être chargé EN DERNIER dans le ,
après style.css, stub.css, header.css
STRUCTURE :
┌─────────────────────────────────────────────────────┐
│ 1. Variables CSS globales (:root) │
│ 2. @media (min-width: 1024px) — laptop / MacBook │
│ 3. @media (min-width: 1280px) — desktop moyen │
│ 4. @media (min-width: 1440px) — grand desktop │
│ 5. @media (min-width: 1920px) — ultra-wide / 27" │
└─────────────────────────────────────────────────────┘
ROLLBACK : supprimer les de ce fichier dans les HTML,
ou : git checkout HEAD -- responsive-desktop.css
==================================================================== */
/* ====================================================================
§1 — VARIABLES CSS GLOBALES
Système de tokens : toutes les valeurs d'espacement, typo et
max-width sont définies ici. Elles s'appliquent dès la base (mobile),
les media queries les écrasent pour les grands écrans.
==================================================================== */
:root {
/* ── Couleurs brand (référence centralisée) ── */
--cp-pink: #E8264A;
--cp-pink-dark: #C91E3C;
--cp-pink-light: #fff0f7;
--cp-teal: #42c6bf;
--cp-orange: #f97316;
--cp-dark: #1a1a1a;
--cp-gray: #666666;
--cp-border: #f0e8f5;
/* ── Typographie — échelle fluide base ── */
--fs-hero: clamp(1.9rem, 4.5vw, 2.8rem); /* titre hero homepage */
--fs-h1: clamp(1.6rem, 3.2vw, 2.2rem); /* h1 sections */
--fs-h2: clamp(1.3rem, 2.5vw, 1.8rem); /* h2 sections */
--fs-h3: clamp(1.05rem, 1.8vw, 1.3rem); /* h3 titres cartes */
--fs-body: clamp(0.88rem, 1.1vw, 1rem); /* corps de texte */
--fs-small: 0.82rem; /* labels, métadonnées */
--fs-xsmall: 0.75rem; /* badges, footers */
/* ── Tunnel V2 typographie ── */
--fs-tunnel-title: clamp(1.1rem, 2.4vw, 1.45rem);
--fs-tunnel-step-lbl: clamp(0.95rem, 1.8vw, 1.15rem);
/* ── Espacement — échelle 4-point ── */
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 16px;
--sp-lg: 24px;
--sp-xl: 40px;
--sp-2xl: 56px;
--sp-3xl: 72px;
/* ── Section padding vertical ── */
--section-py: clamp(40px, 5vw, 72px);
/* ── Max-width — conteneurs unifiés ── */
--mw-xs: 480px; /* formulaires, modales */
--mw-sm: 640px; /* contenu centré étroit */
--mw-md: 860px; /* tunnel, articles */
--mw-lg: 1100px; /* page principale */
--mw-xl: 1280px; /* résultats, large */
/* ── Header ── */
--header-h: 112px; /* sera réduit en desktop */
--logo-h: 82px;
/* ── Border radius ── */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 28px;
--r-full: 50px;
}
/* ====================================================================
§2 — LAPTOP / MACBOOK (1024px – 1279px)
Ces écrans sont déjà bien servis par le CSS de base.
On ne corrige que les rares éléments déjà trop grands à cette taille.
==================================================================== */
@media (min-width: 1024px) {
/* ── Header : légère réduction sur MacBook ── */
.header__inner {
height: 88px;
padding: 0 48px;
}
.nav__logo img {
height: 64px;
}
/* ── Bouton hero CTA : padding légèrement réduit ── */
.btn--cta {
font-size: 1.1rem;
padding: 16px 42px;
}
/* ── Hero title : plafond ramené à 2.6rem ── */
.hero__title {
font-size: clamp(2rem, 4.2vw, 2.6rem);
}
/* ── Tunnel étape 1 : bouton "Continuer" ── */
/* (override de l'inline padding: 18px 110px) */
.pv2-btn-continue {
padding: 16px 64px;
font-size: 1.15rem;
}
/* ── Profil pet-sitter ── */
.profil-page {
padding-left: 28px;
padding-right: 28px;
}
.hero-grid { grid-template-columns: 265px 1fr; }
}
/* ====================================================================
§3 — DESKTOP MOYEN (1280px – 1439px)
Laptops haut de gamme, petits desktops, écrans 24".
Réductions modérées : tout doit encore se sentir ample et premium.
==================================================================== */
@media (min-width: 1280px) {
/* ── Header ── */
.header__inner {
height: 80px;
padding: 0 52px;
}
.nav__logo img {
height: 58px;
}
.nav__link {
font-size: 0.98rem;
padding: 10px 18px;
}
.btn {
padding: 12px 24px;
font-size: 0.92rem;
}
/* ── Hero homepage ── */
.hero__title {
font-size: clamp(1.9rem, 3.8vw, 2.5rem);
}
.hero {
padding: 52px 0 24px;
}
.hero__animals {
flex: 0 0 360px;
}
.animals-grid {
width: 360px;
height: 328px;
}
.animal--dog { width: 182px; height: 182px; top: 18px; left: 50px; }
.animal--cat { width: 164px; height: 164px; top: 8px; right: 0; }
.animal--rabbit { width: 134px; height: 134px; bottom: 24px; right: 24px; }
.animal--turtle { width: 114px; height: 114px; bottom: 16px; left: 16px; }
/* Prix hero — réduit le montant géant ── */
.offer-box__amount { font-size: 2.8rem; }
.offer-box {
padding: 20px 26px;
}
/* ── Section paddings ── */
.features { padding: 40px 0; }
.social-proof { padding: 24px 0 40px; }
.cta-section { padding: 32px 24px 20px; }
/* ── Containers ── */
.container { max-width: 1040px; }
/* ── Footer ── */
.footer { padding-top: 48px; }
.footer__inner { gap: 32px; }
/* ── Profil pet-sitter ── */
.profil-page {
max-width: 980px;
padding-left: 36px;
padding-right: 36px;
}
.hero-grid { grid-template-columns: 260px 1fr; gap: 30px; }
.reviews-grid { grid-template-columns: 1fr 1fr; }
/* ── Tunnel V2 — étapes 2/3/4/5 ── */
.pv2-page { padding: 22px 24px 56px; }
.pv2-inner { max-width: 760px; }
/* NOTE : pv2-intro__title et pv2-step-lbl gérés par page
car les valeurs de base varient fortement (1.65rem étapes 2-5
vs 4.8rem étape 1 hero). Voir inline styles de chaque page. */
.pv2-animal-card { width: 104px; }
.pv2-animal-card__img { font-size: 3.4rem; }
.pv2-animals-flex { gap: 11px; margin-bottom: 26px; }
.pv2-btn-continue {
padding: 13px 44px;
font-size: 0.98rem;
}
.pv2-cards-2col { gap: 16px; margin-bottom: 26px; }
/* ── Bouton hero CTA ── */
.btn--cta {
font-size: 1.05rem;
padding: 15px 38px;
}
}
/* ====================================================================
§4 — GRAND DESKTOP (1440px – 1919px)
Écrans 27" classiques, iMac 24", écrans 1440p.
C'est ici que les réductions sont les plus importantes.
==================================================================== */
@media (min-width: 1440px) {
/* ── Header — compact et pro ── */
.header__inner {
height: 72px;
padding: 0 60px;
}
.nav__logo img {
height: 52px;
}
.nav__link {
font-size: 0.94rem;
padding: 9px 16px;
}
.btn {
padding: 11px 22px;
font-size: 0.9rem;
}
.header__actions { gap: 8px; }
/* ── Hero homepage — plus compact ── */
.hero {
padding: 48px 0 20px;
}
.hero__title {
font-size: clamp(1.8rem, 3.2vw, 2.3rem);
}
.hero__sub {
font-size: 0.92rem;
margin-bottom: 24px;
}
.hero__animals {
flex: 0 0 320px;
}
.animals-grid {
width: 320px;
height: 290px;
}
.animal--dog { width: 160px; height: 160px; top: 16px; left: 44px; }
.animal--cat { width: 146px; height: 146px; top: 6px; right: 0; }
.animal--rabbit { width: 118px; height: 118px; bottom: 20px; right: 20px; }
.animal--turtle { width: 100px; height: 100px; bottom: 14px; left: 14px; }
/* Prix hero ── */
.offer-box__amount { font-size: 2.4rem; }
.offer-box {
padding: 18px 22px;
max-width: 300px;
}
/* ── Sections homepage ── */
.features { padding: 36px 0; }
.social-proof { padding: 20px 0 36px; }
.cta-section { padding: 28px 24px 18px; }
.journey-section { padding: 56px 24px; }
.two-paths { padding: 56px 24px; }
.security-section { padding: 56px 24px; }
.mask-demo-section { padding: 56px 24px; }
.emails-section { padding: 56px 24px; }
/* ── Containers ── */
.container { max-width: 1080px; }
.results-inner { max-width: 1060px; }
/* ── Typographie sections ── */
.section-title { font-size: 1.55rem; }
.section-sub { font-size: 0.9rem; margin-bottom: 40px; }
/* ── Footer ── */
.footer { padding-top: 44px; }
.footer__inner { gap: 28px; }
.footer__col-title { font-size: 0.74rem; }
/* ── Tunnel V2 — étapes 2/3/4/5 ── */
.pv2-page {
padding: 18px 24px 44px;
}
.pv2-inner {
max-width: 660px;
}
.pv2-animal-card { width: 98px; }
.pv2-animal-card__img { font-size: 3.1rem; }
.pv2-animals-flex { gap: 10px; margin-bottom: 22px; }
.pv2-btn-continue {
padding: 12px 40px;
font-size: 0.94rem;
}
.pv2-cards-2col { gap: 14px; margin-bottom: 22px; }
/* ── Tunnel étape 1 (polaroids) ── */
/* Ces overrides ciblent les styles inline via des classes
qu'on ajoute dans les HTML (voir §6 — Intégration HTML) */
.pv2-polaroids-wrap {
max-width: 860px !important;
gap: 28px !important;
}
/* ── Bouton hero CTA ── */
.btn--cta {
font-size: 1rem;
padding: 14px 34px;
}
/* ── Profil pet-sitter ── */
.profil-page {
max-width: 940px;
padding-left: 44px;
padding-right: 44px;
}
.hero-grid {
grid-template-columns: 255px 1fr;
gap: 28px;
}
.reviews-grid {
grid-template-columns: 1fr 1fr;
}
.profil-name { font-size: 1.7rem; }
.profil-avatar-wrap { width: 138px; height: 138px; }
.profil-avatar { width: 138px; height: 138px; font-size: 3rem; }
.profil-avatar-photo { width: 138px; height: 138px; }
/* ── Page résultats pet-sitters (étape 4/5) ── */
.results-page { padding: 22px 24px 52px; }
.results-inner { max-width: 820px; }
.results-page-title { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.sitters-grid { gap: 14px; }
.sitter-card__photo { width: 58px; height: 58px; font-size: 1.4rem; }
.sitter-card__name { font-size: 0.88rem; }
.sitter-card__city { font-size: 0.68rem; }
.sitter-card__top { padding: 12px 12px 0; }
.sitter-card__feats { padding: 0 11px; gap: 4px; }
.sitter-card__feat { font-size: 0.7rem; }
.sitter-card__actions { padding: 8px 11px 11px; }
.btn--view-sitter, .btn--select-sitter { font-size: 0.7rem; padding: 7px 5px; }
.results-recap-bar { padding: 11px 16px; }
.unlock-cta-band { padding: 24px 28px; }
.unlock-cta-band__title { font-size: 1.25rem; }
/* ── Pages publiques secondaires ── */
.sitter-hero { padding: 48px 24px 40px; }
.how-hero { padding: 48px 24px 40px; }
.abo-hero { padding: 48px 24px 40px; }
/* ── Parcours classique (étapes 1-3 pré-V2) ── */
.parcours-page { padding: 36px 24px 64px; }
.parcours-inner { max-width: 680px; }
}
/* ====================================================================
§5 — ULTRA-WIDE / 27" FULL HD (≥ 1920px)
Micro-ajustements pour les très grands écrans.
Le but est d'éviter que le contenu "flotte" dans le vide.
==================================================================== */
@media (min-width: 1920px) {
/* ── Header ── */
.header__inner {
height: 68px;
padding: 0 80px;
}
.nav__logo img {
height: 48px;
}
.nav__link { font-size: 0.92rem; }
/* ── Hero title — plafonné plus bas ── */
.hero__title {
font-size: clamp(1.7rem, 2.5vw, 2.1rem);
}
/* ── Hero animals ── */
.hero__animals { flex: 0 0 290px; }
.animals-grid { width: 290px; height: 265px; }
.animal--dog { width: 146px; height: 146px; top: 14px; left: 40px; }
.animal--cat { width: 132px; height: 132px; top: 5px; right: 0; }
.animal--rabbit { width: 108px; height: 108px; bottom: 18px; right: 18px; }
.animal--turtle { width: 90px; height: 90px; bottom: 12px; left: 12px; }
/* ── Container global ── */
.container { max-width: 1120px; }
/* ── Page résultats pet-sitters ── */
.results-page { padding: 18px 24px 44px; }
.results-inner { max-width: 760px; }
.sitters-grid { gap: 12px; }
.sitter-card__photo { width: 52px; height: 52px; font-size: 1.3rem; }
.sitter-card__name { font-size: 0.85rem; }
.sitter-card__top { padding: 10px 10px 0; }
/* ── Profil pet-sitter ── */
.profil-page {
max-width: 880px;
padding-left: 52px;
padding-right: 52px;
}
.hero-grid { grid-template-columns: 240px 1fr; gap: 24px; }
.profil-name { font-size: 1.6rem; }
/* ── Tunnel V2 ── */
.pv2-inner { max-width: 620px; }
.pv2-animal-card { width: 92px; }
.pv2-animal-card__img { font-size: 2.8rem; }
.pv2-btn-continue {
padding: 11px 36px;
font-size: 0.9rem;
}
/* ── Sections ── */
.features { padding: 32px 0; }
.section-title { font-size: 1.45rem; }
/* ── Prix hero ── */
.offer-box__amount { font-size: 2.2rem; }
}
/* ====================================================================
§6 — NOTE D'INTÉGRATION HTML
====================================================================
Ce fichier doit être ajouté dans le de CHAQUE page HTML,
EN DERNIER, après tous les autres CSS :
(si présent)
← ici
Pour les pages tunnel étape 1 et 2 qui ont des max-width
surdimensionnés en style inline (1400px, 1280px), une correction
supplémentaire sera appliquée directement dans leur