, le texte suit avec padding */
}
/* Baseline d'accueil mobile : sobre, alignée en bas à droite.
La taille typo est gérée par le breakpoint @media 760px de
.section-bigtitle (38px). On garde juste les paddings ici. */
.home-baseline {
left: 24px;
right: 24px;
bottom: 5vh;
text-align: right;
}
/* ===== FENÊTRE DE CONTENU EN BOTTOM-SHEET ===== */
.panel {
/* Le panneau commence SOUS le header (90px), pas en haut de l'écran.
L'oblique horizontale s'inscrit donc sous le header et le drag y est accessible. */
top: 90px;
right: 0;
left: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: calc(100vh - 90px);
/* Position fermée : translaté vers le bas (hors écran) */
transform: translateY(calc(100vh - 90px));
}
.panel.open {
transform: translateY(0);
}
/* Oblique horizontale en haut du panneau :
descend de la gauche (oblique-offset) vers la droite (0). */
.panel-bg {
clip-path: polygon(
0 var(--oblique-offset), /* haut-gauche descendu */
100% 0, /* haut-droite à 0 */
100% 100%, /* bas-droite */
0 100% /* bas-gauche */
);
}
.panel-content {
/* Padding-top pour laisser de la place à la zone oblique + flèche */
padding: calc(var(--oblique-offset) + 60px) 28px 80px 28px;
/* Clipper le contenu en mobile pour que le scroll ne fasse pas
déborder le texte sur la zone oblique (où il n'y a pas de fond blanc). */
clip-path: polygon(
0 var(--oblique-offset),
100% 0,
100% 100%,
0 100%
);
}
/* ===== HANDLE = oblique + zone autour de la flèche ===== */
.panel-handle {
top: 0;
left: 0;
width: 100%;
height: calc(var(--oblique-offset) + 35px); /* couvre l'oblique + la flèche */
}
/* Tab rectangulaire en mobile : presque collé à la ligne oblique au centre,
du côté blanc. Forme rectangulaire droite (sans inclinaison).
Largeur réduite de 25% par rapport au desktop pour un rendu plus discret. */
.panel-handle-arrow {
top: calc(var(--oblique-offset) / 2 + 2px);
left: 50%;
transform: translateX(-50%);
width: 29px; /* 38 * 0.75 — réduit de 25% en mobile */
}
/* Le SVG du chevron pointe vers le bas en mobile */
.panel-handle-arrow svg {
transform: rotate(90deg);
}
.panel-handle:active .panel-handle-arrow {
transform: translateX(-50%) scale(0.92);
}
.panel-content p {
font-size: 14px;
}
/* Tab de réouverture en mobile : en bas centré, horizontal */
.reopen-tab {
top: auto;
right: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px; /* moitié de 60 */
height: 24px; /* +25% pour effet languette */
border-radius: 5px 5px 0 0;
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
padding: 3px 0 0 0;
}
.reopen-tab svg {
transform: rotate(90deg); /* flèche pointe vers le haut */
}
.reopen-tab:active {
transform: translateX(-50%) scale(0.95);
}
}
/* Mobile PORTRAIT uniquement : logo du header mobile +15 %
(56 px × 1,15 ≈ 64 px). Desktop garde sa taille d'origine,
mobile paysage garde 56 px.
ATTENTION CASCADE : ce bloc DOIT venir après le @media (max-width: 768px)
qui définit .mobile-logo à 56 px (sinon la règle 56 px gagne par ordre
de source à spécificité égale). */
@media (max-width: 768px) and (orientation: portrait) {
.mobile-logo { height: 64px; }
}
/* ========================================
SECTION STUDIO — MISE EN PAGE RÉDACTIONNELLE
======================================== */
/* Wrapper vidéo — border-radius + aspect-ratio pour éviter le layout shift.
En portrait, la vidéo chargée est 9:16 — le wrapper s'adapte.
position: relative pour positionner le bouton fullscreen en overlay. */
.studio-video-wrap {
width: 100%;
margin-bottom: 42px;
border-radius: 10px;
overflow: hidden;
background: #0a0a0a;
aspect-ratio: 16 / 9;
position: relative;
}
/* Bouton plein écran — coin bas droit, visible au survol du wrapper uniquement */
.studio-video-fullscreen {
position: absolute;
bottom: 12px;
right: 12px;
width: 36px;
height: 36px;
border: none;
border-radius: 6px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
opacity: 0;
transition: opacity 0.2s ease, background 0.15s ease;
z-index: 2;
}
.studio-video-wrap:hover .studio-video-fullscreen {
opacity: 1;
}
.studio-video-fullscreen:hover {
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
.studio-video-fullscreen svg {
width: 100%;
height: 100%;
display: block;
}
@media (orientation: portrait) {
.studio-video-wrap {
aspect-ratio: 9 / 16;
}
}
.studio-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Paragraphe studio — pas de BFC (pas d'overflow:hidden).
Le texte s'écoule naturellement autour du portrait flottant et passe dessous.
Le titre vertical (drop-float interne) est contenu par le pseudo-élément ::after. */
.studio-para {
margin-bottom: 32px;
}
/* Clearfix — contient les drop-floats internes sans créer de BFC
(BFC empêcherait le texte de passer sous la photo portrait) */
.studio-para::after {
content: '';
display: table;
clear: both;
}
/* Titre vertical — style lettrine pivotée (inspiration typographie éditoriale).
writing-mode: vertical-rl sans rotation : texte de haut en bas (+90°, incline tête droite).
rotate(180deg) = texte de bas en haut (−90°, incline tête gauche).
Gauche (L'écoute) = rotate(180deg) = −90°.
Droite (Le silence, Le geste) = pas de rotation = +90°. */
.studio-drop {
float: left;
writing-mode: vertical-rl;
transform: rotate(180deg); /* −90° : tête gauche — cohérent avec alignement gauche */
font-size: 0.92em; /* desktop : -20% par rapport à 1.15em */
line-height: 1;
font-weight: 500; /* demi-gras : lisible malgré la réduction de taille */
text-transform: uppercase;
letter-spacing: 0.18em;
margin: 0 14px 0 0;
color: rgba(26, 26, 26, 0.30); /* opacité -20% par rapport à 0.38 */
}
/* Variante droite (Le silence, Le geste) :
pas de rotation — le texte lit de haut en bas (+90°, incline tête droite). */
.studio-drop--right {
float: right;
transform: none; /* +90° : tête droite — cohérent avec alignement droite */
margin: 0 0 0 14px;
}
/* Groupe photo : contient le float de la photo via overflow:hidden (clearfix).
Les .studio-para enfants (BFC) se placent côte à côte avec la photo
et s'empilent verticalement — la photo traverse les deux paragraphes. */
.studio-float-group {
overflow: hidden;
}
/* Photo portrait JC — par défaut flotte à droite. Marges minimales :
un petit écart horizontal pour ne pas coller au texte, rien dessus ni
dessous pour que le texte épouse au plus près. */
.studio-portrait {
float: right;
width: clamp(153px, 35.7%, 221px); /* -15 % vs version précédente (180/42%/260) */
border-radius: 10px;
margin: 0 0 0 12px; /* top/bottom: 0 — écart texte: 12 px à gauche */
display: block;
}
/* Variante : photo flotte à gauche (utilisée pour habiller le paragraphe 3
« Le geste »). On inverse simplement le sens des marges horizontales. */
.studio-portrait--left {
float: left;
margin: 0 12px 0 0; /* top/bottom: 0 — écart texte: 12 px à droite */
}
/* Embed YouTube studio tour */
.studio-ytb-wrap {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
margin: 40px 0 8px 0;
background: #0a0a0a;
clear: both; /* s'assure que l'embed se place sous tous les floats */
}
.studio-ytb-wrap iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* ---- MOBILE ----------------------------------------------------------- */
@media (max-width: 768px) {
/* Les titres verticaux restent flottants sur mobile — chaque .studio-para (BFC)
contient son propre titre. Alignements : Le silence droite, L'écoute gauche,
Le geste droite (Le silence et Le geste ont déjà .studio-drop--right en HTML). */
.studio-drop {
font-size: 1.04em; /* mobile : -20% par rapport à 1.3em */
font-weight: 500; /* demi-gras — cohérent avec desktop */
}
/* Photo : non-flottante, pleine largeur, centrée */
.studio-portrait {
float: none;
display: block;
width: 100%;
max-width: 280px;
margin: 0 auto 22px auto;
}
.studio-video-wrap {
margin-bottom: 28px;
}
.studio-ytb-wrap {
margin: 28px 0 8px 0;
}
}
/* ========================================
SECTION ÉQUIPEMENT
========================================
Intro : flexbox 3 zones — enceinte gauche (bas) / texte / enceinte droite (haut).
Gear : grille 2 colonnes — MASTERING à gauche, reste à droite.
Icônes SVG 26px devant chaque titre de catégorie.
*/
/* ── BLOC INTRO AVEC ENCEINTES ─────────────────────────────────── */
/* Conteneur intro — clearfix pour contenir les floats des enceintes */
.equip-intro-wrap {
overflow: hidden;
margin-bottom: 36px;
}
/* Texte combiné — un seul qui s'écoule autour des deux enceintes flottantes.
Sélecteur p.* pour battre la spécificité de .panel-content p. */
p.equip-intro {
font-size: 14px;
line-height: 1.75;
color: var(--texte-noir); /* noir plein (#1a1a1a) — aligné sur les autres panneaux */
margin: 0;
}
/* Écart entre les deux paragraphes d'intro : exactement une hauteur de ligne.
Permet au 2e paragraphe de continuer à wraper autour des enceintes
au lieu de sauter complètement en dessous. */
p.equip-intro + p.equip-intro {
margin-top: 1lh;
}
/* Base commune aux deux enceintes — floats simples alignés en haut.
Le texte coule étroit au centre tant que les enceintes sont là,
puis pleine largeur en dessous. Dimensions +25% vs version initiale. */
.equip-speaker {
width: clamp(90px, 20%, 146px);
height: auto;
display: block;
opacity: 0.88;
}
/* Enceinte droite — flotte à droite, en haut du wrap.
Marges très réduites pour que le texte enveloppe au plus près :
bord intérieur 4px (lateral), bord bas 4px (vertical). */
.equip-speaker--right {
float: right;
margin: 0 0 4px 4px;
}
/* Enceinte gauche — flotte à gauche, miroir CSS (un seul fichier source).
Mêmes marges que la droite, en miroir. */
.equip-speaker--left {
float: left;
margin: 0 4px 4px 0;
transform: scaleX(-1);
}
/* ── GRILLE MATÉRIEL ───────────────────────────────────────────── */
/* 2 colonnes égales : MASTERING à gauche, reste à droite */
/* ----------------------------------------------------------------
Strip de logos de marques — visuel décoratif entre l'intro et la
liste détaillée. Tous les SVG sont monochromes ; on les calibre par
leur HAUTEUR pour aligner verticalement les wordmarks de ratios
variés (Manley ~3.6:1, Lavry ~5.8:1, etc.).
---------------------------------------------------------------- */
.equip-brands {
list-style: none;
margin: 36px 0 32px;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 22px;
}
.equip-brands li {
display: flex;
align-items: center;
flex-shrink: 1;
min-width: 0;
}
.equip-brands img {
height: 28px; /* +25 % vs ancienne valeur 22 px */
width: auto;
max-width: 138px; /* +25 % proportionnellement */
object-fit: contain;
display: block;
opacity: 0.78;
transition: opacity 0.18s ease;
}
.equip-brands img:hover { opacity: 1; }
/* ----------------------------------------------------------------
Pop-up « Liste détaillée du matériel »
- bouton .equip-toggle ouvre l'overlay (cf. js/equip-toggle.js)
- structure visuelle .popup-overlay-* mutualisée avec les Tarifs
(cf. bloc « POP-UP OVERLAY — style commun » dans ce fichier).
La grille interne 2 colonnes (.equip-gear) reste identique à la
version précédente — c'est juste le contenant qui change.
---------------------------------------------------------------- */
.equip-actions {
margin-top: 24px;
display: flex;
justify-content: flex-start;
}
/* Pop-up Équipement — 4 lampes en tête, allumées en permanence.
Halo chaud (::before) + lueur de filament (::after) — mêmes
gradients et flous que les lampes Tarifs au survol, mais ici
l'effet est toujours actif (pas de transition opacity 0→1).
Légère taille réduite (50px) pour que la rangée tienne dans
le head sans trop manger la place du titre. */
#equip-overlay .popup-overlay-lamp {
height: 50px;
}
#equip-overlay .popup-overlay-lamp::before {
content: "";
position: absolute;
inset: -25%;
background: radial-gradient(
ellipse 50% 65% at 50% 55%,
rgba(255, 170, 70, 0.18) 0%,
rgba(255, 125, 30, 0.09) 35%,
rgba(255, 95, 15, 0.03) 60%,
transparent 80%
);
filter: blur(16px);
pointer-events: none;
z-index: 0;
}
#equip-overlay .popup-overlay-lamp::after {
content: "";
position: absolute;
left: 50%;
top: 67%;
width: 62%;
height: 13%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(255, 200, 120, 0.70) 0%,
rgba(255, 155, 55, 0.45) 35%,
rgba(255, 105, 20, 0.18) 65%,
transparent 85%
);
filter: blur(8px);
pointer-events: none;
z-index: 2;
}
#equip-overlay .popup-overlay-lamp img {
position: relative;
z-index: 1;
filter: drop-shadow(0 0 4px rgba(255, 165, 60, 0.35));
}
.equip-gear {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 40px;
}
/* Icône SVG — taille standard (+30% vs version précédente, lisibilité accrue).
Opacité 1 (noir 100 %) — la liste apparaît sur demande, on ne cherche
plus à atténuer les icônes. */
.equip-icon {
width: 29px;
height: 29px;
object-fit: contain;
opacity: 1;
flex-shrink: 0;
}
/* Variante grande icône (Mastering — knobvintage plus détaillé) : ~50% de plus */
.equip-cat--lg-icon .equip-icon {
width: 43px;
height: 43px;
}
/* En-tête catégorie : icône + titre sur la même ligne */
.equip-cat-head {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
margin-top: 28px;
}
/* Premier en-tête de chaque colonne — pas de marge haute */
.equip-col > .equip-cat:first-child .equip-cat-head {
margin-top: 0;
}
/* En-tête sans icône (Digital) — décalage pour aligner avec les autres titres */
.equip-cat-head--no-icon {
padding-left: 31px; /* 22px icône + 9px gap */
}
/* Titre de catégorie — style des titres Studio : plus gros, demi-gras.
Noir 100 % maintenant que la liste est dévoilée à la demande. */
.equip-cat-title {
font-size: 22px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--texte-noir);
margin: 0;
}
/* Liste matériel — items alignés à gauche (même axe que l'icône SVG)
pour atténuer l'effet "liste à puces" */
.equip-list {
list-style: none;
margin: 0;
padding: 0;
}
.equip-list li {
font-size: 14px; /* aligné sur la taille body du site */
line-height: 1.45; /* serré — évite l'effet liste-de-crédits */
color: var(--texte-noir); /* marque en noir plein — donne le rythme */
padding: 1.5px 0;
text-transform: uppercase; /* marques en majuscules */
letter-spacing: 0.03em;
}
/* Séparateur // — discret */
.equip-list .sep {
color: rgba(26, 26, 26, 0.3);
margin: 0 4px;
font-weight: 300;
letter-spacing: 0;
}
/* Modèle — italique + casse normale, ton plus clair que la marque
pour faire ressortir le constructeur en début de ligne */
.equip-list em {
font-style: italic;
text-transform: none;
letter-spacing: 0;
color: rgba(26, 26, 26, 0.6);
}
/* Digital : noms à la suite séparés par · — affichage volontairement discret.
Même style typographique que les modèles en italique des autres listes
(italique, casse normale, ton 0.6) pour ne pas mettre ces marques en avant.
Sélecteur p.* pour battre la spécificité de .panel-content p (qui force le noir). */
p.equip-list--inline {
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 1.55;
color: rgba(26, 26, 26, 0.6);
font-style: italic;
letter-spacing: 0;
}
/* Note "Liste non exhaustive, en mouvement." — un clin d'œil discret.
Taille body (14px) pour rester lisible, italique + opacité faible pour
la garder en retrait visuel.
Sélecteur p.* pour battre la spécificité de .panel-content p. */
p.equip-note {
font-size: 14px;
font-style: italic;
color: rgba(26, 26, 26, 0.32);
margin: 6px 0 0;
padding: 0;
text-transform: none;
letter-spacing: 0;
}
/* ── MOBILE ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Mobile : on garde uniquement l'enceinte droite, plus petite.
Marges resserrées (4px / 4px) — même logique que desktop, le viewBox
SVG est déjà recadré donc le texte se colle directement au contour. */
.equip-speaker--left {
display: none;
}
.equip-speaker--right {
width: clamp(63px, 21vw, 92px); /* +15% vs version précédente */
margin: 0 0 4px 4px;
}
/* Grille matériel en colonne unique */
.equip-gear {
grid-template-columns: 1fr;
gap: 0;
}
/* Quand les deux colonnes fusionnent verticalement, on doit restaurer
la marge en haut du premier de la colonne de droite —
sinon Monitoring colle à Tape Recorder qui le précède. */
.equip-col:not(:first-child) > .equip-cat:first-child .equip-cat-head {
margin-top: 28px;
}
}
/* ========================================
SECTION CONTACT — Formulaire (Phase 1)
3 intents : tracks / quote / question
Tout est préfixé .cf- pour éviter les collisions.
Logique conditionnelle (data-show-for) → Phase 2 (JS).
======================================== */
/* Honeypot anti-bot : invisible pour les humains, lisible par les robots */
.cf-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Variables locales au formulaire — soft tones très clairs pour rester sur du blanc */
.cf-form {
--cf-line: #ececec;
--cf-line-strong: #d8d8d8;
--cf-divider: rgba(0, 0, 0, 0.28); /* lignes de séparation des sections (foncé) */
--cf-muted: #6b6b6b;
--cf-muted-2: #9a9a9a;
--cf-num-color: rgba(0, 0, 0, 0.65); /* numéros section + hints (65%) */
--cf-hint-soft: rgba(0, 0, 0, 0.5); /* mini-hints discrets (50%) */
--cf-soft-1: #fafaf8; /* hover discret */
--cf-soft-2: #f0efec; /* sélectionné */
--cf-soft-3: #e2e1de; /* bordure sélectionné */
--cf-req: #c8332a;
--cf-radius: 4px;
--cf-radius-lg: 6px;
--cf-pad: 14px;
--cf-gap: 14px;
--cf-section-gap: 48px;
--cf-mono: 'Courier New', ui-monospace, Menlo, monospace;
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--texte-noir);
}
/* Intro éditoriale — encore +50% */
.cf-display {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(56px, 10vw, 110px);
line-height: 1.02;
letter-spacing: -0.015em;
text-transform: uppercase;
margin: 0 0 28px;
text-wrap: balance;
}
.cf-display em {
font-style: normal;
color: var(--texte-gris);
font-weight: 400;
}
.cf-lede {
font-size: 14.5px;
line-height: 1.55;
color: var(--texte-noir);
margin: 0 0 32px;
text-wrap: pretty;
}
/* ============================================================
EN-TÊTE ÉDITORIAL CONTACT (.cf-intro-row)
------------------------------------------------------------
Titre à gauche, pastilles réseaux sociaux à droite, sur la
même ligne. Flex aligné en bas pour que les pastilles soient
posées sur la base du titre. Mobile : colonne, socials sous
le titre. */
.cf-intro-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 48px;
}
/* Le titre dans la cf-intro-row reprend automatiquement le style
.section-bigtitle. On lui retire son margin-bottom standalone
(géré par la row elle-même) pour éviter les doublons. */
.cf-intro-row .section-bigtitle {
margin-bottom: 0;
}
/* Pastilles rondes pour les réseaux sociaux */
.cf-direct-socials {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* Pastilles socials : même langage visuel que .cf-btn —
rond noir plein au repos, inversion au survol (blanc + léger lift
+ ombre douce). Logos en SVG via fill/stroke = currentColor pour
suivre la couleur du parent. */
.cf-direct-socials a {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--texte-noir) !important;
border-radius: 999px;
background: var(--texte-noir); /* repos : noir plein */
color: #f5f5f3 !important; /* logo clair sur fond noir */
text-decoration: none !important;
padding-bottom: 0 !important;
/* Mêmes propriétés animées que .cf-btn (background/color/transform/shadow) */
transition: background 0.18s ease, color 0.18s ease,
transform 0.18s ease, box-shadow 0.18s ease !important;
}
.cf-direct-socials a:hover {
background: #fff; /* hover : blanc */
color: var(--texte-noir) !important; /* logo redevient noir */
border-color: var(--texte-noir) !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
opacity: 1 !important;
}
.cf-direct-socials svg {
width: 22px;
height: 22px;
}
/* Mobile portrait : on conserve le layout en ligne (titre à gauche,
socials à droite). Pour que les pastilles tiennent sur la même
ligne malgré la largeur réduite, on les diminue légèrement.
align-items: flex-end (hérité) → les pastilles sont posées sur
la base de la 2e ligne du titre. */
@media (max-width: 720px) {
.cf-intro-row {
gap: 14px;
align-items: flex-end;
}
.cf-intro-row .cf-direct-socials a {
width: 36px;
height: 36px;
}
.cf-intro-row .cf-direct-socials svg {
width: 18px;
height: 18px;
}
.cf-intro-row .cf-direct-socials {
gap: 4px;
}
}
/* Sections */
.cf-section { margin-bottom: var(--cf-section-gap); }
/* ---- Affichage conditionnel selon l'intention sélectionnée ----
Les sections taggées data-show-for="X" sont cachées par défaut.
Quand le formulaire reçoit data-active-intent="X" (via JS), seules les sections
correspondantes sont affichées. La barre de soumission suit la même logique. */
.cf-form .cf-section[data-show-for] { display: none; }
.cf-form .cf-section[data-show-for~="always"] { display: block; }
.cf-form .cf-submit-bar[data-show-for] { display: none; }
.cf-form[data-active-intent="question"] .cf-section[data-show-for~="question"],
.cf-form[data-active-intent="quote"] .cf-section[data-show-for~="quote"],
.cf-form[data-active-intent="tracks"] .cf-section[data-show-for~="tracks"] {
display: block;
}
.cf-form[data-active-intent="question"] .cf-submit-bar[data-show-for~="question"],
.cf-form[data-active-intent="quote"] .cf-submit-bar[data-show-for~="quote"],
.cf-form[data-active-intent="tracks"] .cf-submit-bar[data-show-for~="tracks"] {
display: flex;
}
/* Animation d'apparition douce des sections quand l'intention change */
.cf-form[data-active-intent] .cf-section[data-show-for]:not([data-show-for~="always"]),
.cf-form[data-active-intent] .cf-submit-bar[data-show-for] {
animation: cf-unfold 0.4s ease;
}
@keyframes cf-unfold {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.cf-head {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: baseline;
gap: 16px;
padding-bottom: 14px;
margin-bottom: 22px;
border-bottom: 1px solid var(--cf-divider);
}
.cf-head .cf-num {
font-family: var(--cf-mono);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
color: var(--cf-num-color);
}
.cf-head h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0;
color: var(--texte-noir);
}
.cf-hint {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cf-num-color);
}
/* Lignes / colonnes */
.cf-row {
display: grid;
gap: var(--cf-gap);
margin-bottom: var(--cf-gap);
}
.cf-row--2 { grid-template-columns: 1fr 1fr; }
.cf-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) {
.cf-row--2,
.cf-row--3 { grid-template-columns: 1fr; }
}
/* Champs */
.cf-field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
/* Label par défaut : block — l'astérisque rouge suit directement le texte */
.cf-field label {
font-size: 12.5px;
font-weight: 500;
color: #1a1a1a;
}
/* Quand le label contient un .cf-field-hint, on bascule en flex pour pousser
le hint à droite (l'astérisque reste collé au texte grâce au wrapper span). */
.cf-field label:has(.cf-field-hint) {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.cf-req {
color: var(--cf-req);
font-weight: 600;
margin-left: 2px;
}
.cf-field-hint {
font-size: 10px;
color: var(--cf-hint-soft);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 500;
}
/* Inputs / textarea / select */
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="tel"],
.cf-form input[type="number"],
.cf-form input[type="url"],
.cf-form select,
.cf-form textarea {
width: 100%;
font: inherit;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: var(--texte-noir);
background: #ffffff;
border: 1px solid var(--cf-line-strong);
border-radius: var(--cf-radius);
padding: var(--cf-pad) 14px;
outline: none;
transition: border 0.15s, box-shadow 0.15s;
}
.cf-form textarea {
resize: vertical;
min-height: 100px;
line-height: 1.5;
}
.cf-form input::placeholder,
.cf-form textarea::placeholder { color: var(--cf-muted-2); }
.cf-form input:hover,
.cf-form textarea:hover,
.cf-form select:hover { border-color: #1a1a1a; }
.cf-form input:focus,
.cf-form textarea:focus,
.cf-form select:focus {
border-color: var(--texte-noir);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
/* Téléphone (préfixe + numéro) */
.cf-phone {
display: grid;
grid-template-columns: 80px 1fr;
border: 1px solid var(--cf-line-strong);
border-radius: var(--cf-radius);
background: #fff;
overflow: hidden;
transition: border 0.15s, box-shadow 0.15s;
}
.cf-phone:focus-within {
border-color: var(--texte-noir);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.cf-form .cf-phone select,
.cf-form .cf-phone input {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 12px 10px;
}
.cf-form .cf-phone select {
border-right: 1px solid var(--cf-line) !important;
font-family: var(--cf-mono);
font-size: 12.5px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding-right: 18px;
background-image: linear-gradient(45deg, transparent 50%, var(--texte-noir) 50%),
linear-gradient(135deg, var(--texte-noir) 50%, transparent 50%);
background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
}
/* Cartes d'intention */
.cf-intent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 720px) {
.cf-intent-grid { grid-template-columns: 1fr; }
}
.cf-intent-card {
position: relative;
background: #fff;
border: 1px solid var(--cf-line-strong);
border-radius: var(--cf-radius-lg);
padding: 0;
font: inherit;
font-family: 'Montserrat', sans-serif;
color: var(--texte-noir);
cursor: pointer;
text-align: left;
width: 100%;
overflow: hidden;
transition: all 0.18s ease;
display: flex;
flex-direction: column;
}
.cf-intent-card:hover {
border-color: #1a1a1a;
transform: translateY(-1px);
}
.cf-intent-card[aria-pressed="true"] {
background: var(--cf-soft-2);
border-color: var(--cf-soft-3);
box-shadow: inset 0 0 0 1px var(--cf-soft-3);
}
.cf-intent-card[aria-pressed="true"] .cf-intent-photo img {
filter: grayscale(0) contrast(1.02);
}
.cf-intent-photo {
position: relative;
width: 100%;
aspect-ratio: 16 / 8;
overflow: hidden;
background: var(--cf-soft-2);
}
.cf-intent-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.02);
transition: filter 0.3s, transform 0.4s;
}
.cf-intent-card:hover .cf-intent-photo img { transform: scale(1.04); }
.cf-bignum {
position: absolute;
left: 10px;
bottom: -2px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 0.85;
color: #fff;
letter-spacing: -0.02em;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.cf-intent-text {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cf-intent-meta {
display: flex;
align-items: baseline;
gap: 8px;
}
.cf-intent-num {
font-family: var(--cf-mono);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.16em;
color: #6b6b6b;
}
.cf-intent-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
line-height: 1.2;
text-transform: uppercase;
}
.cf-intent-sub {
font-size: 12px;
color: #6b6b6b;
line-height: 1.4;
margin: 0;
text-wrap: pretty;
}
/* Pills (radio + checkbox stylisés) */
.cf-opts {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
}
.cf-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--cf-line-strong);
border-radius: 999px;
background: #fff;
color: var(--texte-noir);
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 12.5px;
line-height: 1;
transition: all 0.15s;
user-select: none;
min-height: 34px;
}
.cf-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cf-pill:hover {
border-color: #1a1a1a;
background: var(--cf-soft-1);
}
.cf-pill:has(input:checked) {
background: var(--cf-soft-2);
color: #1a1a1a;
border-color: var(--cf-soft-3);
box-shadow: inset 0 0 0 1px var(--cf-soft-3);
}
.cf-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: transparent;
border: 1.5px solid var(--texte-noir);
transition: all 0.15s;
flex-shrink: 0;
}
.cf-pill[data-type="checkbox"] .cf-dot {
border-radius: 2px;
}
.cf-pill:has(input:checked) .cf-dot {
background: var(--texte-noir);
border-color: var(--texte-noir);
}
/* Bloc upload (Smash + lien) */
.cf-upload {
display: grid;
gap: 10px;
}
.cf-upload-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 18px;
border: 1px solid var(--cf-line-strong) !important;
border-radius: var(--cf-radius-lg) !important;
background: #fff;
text-decoration: none !important;
color: var(--texte-noir) !important;
padding-bottom: 16px !important;
transition: all 0.15s !important;
}
.cf-upload-cta:hover {
border-color: var(--texte-noir) !important;
background: var(--cf-soft-1);
}
.cf-upload-lead {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.cf-upload-icon {
width: 36px;
height: 36px;
border: 1px solid var(--cf-line-strong);
border-radius: 999px;
display: grid;
place-items: center;
flex-shrink: 0;
transition: all 0.15s;
}
.cf-upload-icon svg {
width: 14px;
height: 14px;
stroke: var(--texte-noir);
fill: none;
}
.cf-upload-text { min-width: 0; }
.cf-upload-text strong {
display: block;
font-weight: 500;
font-size: 14px;
color: var(--texte-noir);
}
.cf-upload-text span {
font-family: var(--cf-mono);
font-size: 11px;
color: #6b6b6b;
letter-spacing: 0.04em;
}
/* Pastille logo Smash — affiche le PNG tel quel (suppose qu'il inclut déjà le fond) */
.cf-smash-chip {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
border-radius: 6px;
flex-shrink: 0;
overflow: hidden;
}
.cf-smash-chip img {
height: 100%;
width: auto;
display: block;
}
.cf-upload-divider {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.24em;
color: var(--cf-hint-soft);
text-transform: uppercase;
}
.cf-upload-divider::before,
.cf-upload-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--cf-divider);
}
/* Tracklist (éditeur de morceaux) */
.cf-tracklist {
border: 1px solid var(--cf-line-strong);
border-radius: var(--cf-radius);
overflow: hidden;
background: #fff;
}
.cf-track-head {
display: grid;
grid-template-columns: 36px 1fr 160px 32px;
background: var(--cf-soft-1);
border-bottom: 1px solid var(--cf-divider);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b6b6b;
}
.cf-track-head > div { padding: 9px 12px; }
.cf-track-head > div:first-child {
padding-left: 0;
text-align: center;
}
.cf-track-isrc-opt {
opacity: 0.5;
font-weight: 500;
}
.cf-track-row {
display: grid;
grid-template-columns: 36px 1fr 160px 32px;
align-items: center;
border-bottom: 1px solid var(--cf-divider);
}
.cf-track-row:last-of-type { border-bottom: none; }
.cf-track-idx {
font-family: var(--cf-mono);
font-size: 11px;
color: #6b6b6b;
text-align: center;
letter-spacing: 0.05em;
}
.cf-form .cf-track-row input {
border: none !important;
background: transparent !important;
border-radius: 0 !important;
padding: 12px !important;
box-shadow: none !important;
}
.cf-form .cf-track-isrc {
border-left: 1px solid var(--cf-divider) !important;
font-family: var(--cf-mono);
font-size: 11.5px;
text-transform: uppercase;
}
.cf-track-rm {
border: none;
background: transparent;
cursor: pointer;
color: #6b6b6b;
width: 32px;
height: 100%;
display: grid;
place-items: center;
font-size: 13px;
transition: color 0.15s;
}
.cf-track-rm:hover { color: var(--cf-req); }
.cf-track-add {
width: 100%;
border: none;
background: var(--cf-soft-1);
padding: 11px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
color: #6b6b6b;
transition: all 0.15s;
}
.cf-track-add:hover {
color: var(--texte-noir);
background: var(--cf-soft-2);
}
/* Note "C'est tout" (parcours question) */
.cf-question-note {
color: #6b6b6b;
max-width: 56ch;
margin: 0;
font-size: 14px;
line-height: 1.55;
}
.cf-question-note strong {
color: var(--texte-noir);
font-weight: 600;
}
/* Barre de soumission */
/* Bouton seul d'abord, puis la mention légale en dessous (pleine largeur) */
.cf-submit-bar {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding-top: 24px;
border-top: 1px solid var(--cf-divider);
margin-top: 12px;
}
.cf-legal {
/* Mention discrète sous le bouton d'envoi.
Italique + gris 50% pour la fondre sans la cacher (bonne pratique RGPD). */
font-size: 8.5px;
font-style: italic;
color: rgba(0, 0, 0, 0.5);
line-height: 1.55;
margin: 0;
}
/* ----------------------------------------------------------------
.cf-btn — bouton "pilule" unifié pour tout le site
-----------------------------------------------------------------
Style : pilule NOIRE pleine au repos (texte clair, flèche claire),
pour qu'elle saute aux yeux dès le premier coup d'œil.
Au hover : le fond se vide (transparent → laisse voir le panneau),
le texte repasse en noir, le contour reste — l'inverse du repos.
Inclut une flèche → (.cf-btn-arr) qui glisse légèrement.
Variante fond noir : .faq-contact-btn.cf-btn (cf. plus bas) reste en
pilule transparente / texte blanc — elle est posée sur le bandeau
noir et ne suit donc pas l'inversion par défaut.
---------------------------------------------------------------- */
.cf-btn {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 14px 24px;
border-radius: 999px;
border: 1px solid var(--texte-noir);
background: var(--texte-noir); /* repos : noir plein */
color: #f5f5f3; /* texte clair lisible sur noir */
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease,
transform 0.18s ease, box-shadow 0.18s ease;
}
.cf-btn:hover {
background: #fff; /* hover : pilule blanche, texte noir */
color: var(--texte-noir);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* (Plus besoin de "rétablir" .cf-btn dans le panneau : depuis qu'on a
exclu .cf-btn de la règle générique `.panel-content a` via :not(),
les boutons gardent naturellement leur padding et leur bordure. */
/* Flèche SVG : même tracé que le picto du menu ENVOYER, épaisseur du trait
alignée sur la graisse du texte (font-weight 600 → stroke-width 2). */
.cf-btn-arr {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
fill: none;
flex-shrink: 0;
transition: transform 0.18s;
}
.cf-btn:hover .cf-btn-arr { transform: translate(2px, -2px); }
/* ---- Vue de succès — bulle discrète, à peine détachée du fond ---- */
.cf-success {
padding: 56px 0;
text-align: center;
}
.cf-success-bubble {
display: inline-block;
background: rgba(0, 0, 0, 0.035);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
padding: 32px 40px;
max-width: 560px;
text-align: center;
}
.cf-success-msg {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1.4;
margin: 0 0 14px;
color: var(--texte-noir);
text-wrap: balance;
}
.cf-success-sub {
font-size: 14px;
line-height: 1.55;
color: var(--texte-gris);
margin: 0;
}
/* ---- États d'erreur de validation (champs requis non remplis) ---- */
.cf-field--error label {
color: var(--cf-req);
}
.cf-form .cf-field--error input,
.cf-form .cf-field--error textarea,
.cf-form .cf-field--error select {
border-color: var(--cf-req) !important;
box-shadow: 0 0 0 3px rgba(200, 51, 42, 0.1) !important;
}
.cf-form .cf-field--error .cf-phone {
border-color: var(--cf-req) !important;
box-shadow: 0 0 0 3px rgba(200, 51, 42, 0.1) !important;
}
.cf-field-error-msg {
font-size: 11.5px;
color: var(--cf-req);
margin-top: 2px;
font-weight: 500;
}
/* ---- Vinyle : colonne Face dans la tracklist ---- */
.cf-track-head.with-vinyl,
.cf-track-row.with-vinyl {
grid-template-columns: 36px 1fr 70px 160px 32px;
}
@media (max-width: 720px) {
.cf-track-head.with-vinyl,
.cf-track-row.with-vinyl {
grid-template-columns: 30px 1fr 50px 110px 28px;
}
}
.cf-track-face {
border: none !important;
background: transparent !important;
border-left: 1px solid var(--cf-divider) !important;
font-family: var(--cf-mono);
font-size: 12.5px;
text-align: center;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding: 12px 8px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Mobile */
@media (max-width: 720px) {
.cf-head {
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
row-gap: 4px;
}
.cf-hint {
grid-column: 2;
grid-row: 2;
}
/* Cartes d'intention : layout horizontal compact (photo gauche / texte droite)
pour réduire de moitié la place verticale prise par les 3 cartes. */
.cf-intent-card {
flex-direction: row;
}
.cf-intent-photo {
width: 38%;
aspect-ratio: 4 / 3;
flex-shrink: 0;
}
.cf-bignum {
font-size: 36px;
left: 8px;
bottom: -2px;
}
.cf-intent-text {
flex: 1;
padding: 10px 14px;
justify-content: center;
gap: 4px;
}
.cf-track-head,
.cf-track-row {
grid-template-columns: 30px 1fr 110px 28px;
}
.cf-upload-cta {
flex-wrap: wrap;
}
.cf-submit-bar {
flex-direction: column;
align-items: stretch;
}
.cf-btn { justify-content: center; }
}
/* ========================================
SECTION INFO — FAQ "Console vintage" (v04)
Implémentée d'après le design Claude Code, avec ajustements :
- Cadre noir des boutons réduit ×3 (cf. faq-info.js)
- Texte des boutons plus gros & gras (cf. faq-info.js)
- Bandeau gris pleine largeur (négatif sur le padding du panneau)
- Knob en filigrane dans le cadre noir contact
- Bouton "ENVOYER UN MESSAGE" arrondi (réutilise .cf-btn)
- Premier bloc sélectionné par défaut (cf. faq-info.js, state initial)
======================================== */
/* En-tête FAQ — titre à gauche / invitation (texte + flèche) à droite.
Flex aligné EN HAUT : titre et hint partent de la même ligne haute,
plus de décalage vertical. La flèche, posée en bas du hint, pointe
toujours vers la grille des pads située en dessous. */
.faq-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
margin-bottom: 28px;
}
/* ============================================================
STYLE COMMUN — Gros sous-titre éditorial de section
------------------------------------------------------------
Utilisé par toute section qui ouvre sur un titre fort en
2 lignes (1re ligne droite, 2e ligne italique avec point final).
Exemples actuels :
- INFO : « Tout savoir / avant de masteriser. »
- CONTACT : « Parlons / de votre projet. »
À piocher dès qu'un nouveau bloc demande la même typographie.
.faq-bigtitle / .faq-bigtitle-alt sont conservés en alias pour
les sélecteurs déjà câblés dans js/faq-info.js. */
.section-bigtitle,
.faq-bigtitle {
font-size: 56px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
color: var(--texte-noir);
text-transform: uppercase; /* style commun : capitales pour les 2 lignes */
}
.section-bigtitle-alt,
.faq-bigtitle-alt {
font-weight: 600;
letter-spacing: -0.02em;
/* Petit clin d'œil italique pour la 2e ligne — cohérent avec autres sections */
font-style: italic;
}
/* Standalone (hors flex header) : on respire un peu en dessous.
Dans la FAQ, .faq-bigtitle est dans .faq-header (flex) qui gère
son propre margin-bottom — pas besoin d'en ajouter sur le titre. */
.section-bigtitle { margin-bottom: 32px; }
/* Sélecteur des 4 blocs — pads carrés avec picto en filigrane gros
et excentré (même principe que le knob filigrane du bandeau contact).
Coins arrondis 10px (cohérence avec les blocs de la section ENVOYER).
- Inactif : fond noir / texte blanc / picto blanc filigrané
- Hover : léger soulèvement (translateY -1px), même principe que
.cf-intent-card du formulaire de contact
- Actif : fond gris clair / texte noir / contour noir */
.faq-console {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 0 0 28px;
background: transparent;
border: none;
}
.faq-pad {
position: relative;
aspect-ratio: 1 / 1;
/* Couleurs par défaut : fond noir / texte blanc.
Au clic, le pad devient gris clair / texte noir / bordure noire. */
background: #000;
color: #fff;
border: 1px solid #000;
border-radius: 10px; /* aligné sur les blocs ENVOYER */
overflow: hidden;
cursor: pointer;
text-align: left;
font-family: inherit;
/* Titre verticalement centré, aligné à gauche ; caption en absolu en
bas à gauche. */
padding: 14px;
display: flex;
align-items: center;
justify-content: flex-start;
transition: background 0.2s ease, color 0.2s ease,
border-color 0.2s ease, transform 0.18s ease,
box-shadow 0.18s ease;
}
/* Animation au survol — même principe que .cf-intent-card (formulaire
contact), version plus prononcée pour la grille FAQ : soulèvement plus
marqué + ombre plus profonde. */
.faq-pad:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
/* État actif : gris clair (≈ +10 % d'opacité par rapport à #e4e3df) +
contour noir doublé (1 → 2 px). box-sizing border-box → pas de
décalage de layout malgré le bord plus épais.
Le pad reçoit aussi une petite pointe en chevron (::after) à cheval
sur la bordure basse, façon « pointe d'une flèche sans la barre »,
pour inviter à regarder vers le bas (= zone des réponses). */
.faq-pad.is-active {
background: #cdccc8; /* +10 % d'opacité vs #e4e3df */
color: #000;
border-color: #000;
border-width: 2px; /* contour 2× plus épais */
/* On élargit la zone de dessin du pad de 12 px sous sa bordure
inférieure pour laisser dépasser la pointe — les autres côtés
restent strictement clippés (la déco filigrane reste contenue).
Remplace le rôle de `overflow: hidden` côté actif. */
overflow: visible;
clip-path: inset(0 0 -12px 0 round 10px);
}
/* Pointe sous le contour — petit triangle plein noir, pointe vers le
bas, accolé à la bordure inférieure. Effet « bulle » : on a
l'impression que la pointe prolonge le contour noir vers le bas
(cf. tooltip type "speech bubble"). */
.faq-pad.is-active::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 16px;
height: 8px;
/* translateY 100 % → la pointe se loge entièrement SOUS la bordure
inférieure ; translateX -50 % la centre horizontalement. */
transform: translate(-50%, 100%);
/* clip-path : trois sommets — haut-gauche, haut-droit, milieu-bas.
L'arête supérieure du triangle est plaquée contre l'arête extérieure
de la bordure du pad (border-box), elles fusionnent visuellement. */
background: #000;
clip-path: polygon(0 0, 100% 0, 50% 100%);
pointer-events: none;
}
/* Picto en filigrane — gros, excentré (déborde en HAUT à droite, même
décalage horizontal qu'avant). Opacité faible pour rester sobre. */
.faq-pad-deco {
position: absolute;
right: -12%;
top: -14%;
width: 88%;
height: 88%;
/* Pad par défaut = fond noir : opacité un peu remontée pour bien voir
le picto en blanc filigrané. */
opacity: 0.22;
pointer-events: none;
transition: opacity 0.2s ease;
}
.faq-pad-deco img {
width: 100%;
height: 100%;
object-fit: contain;
/* SVG noir d'origine → blanc en l'inversant (pad par défaut sur noir) */
filter: invert(1);
}
/* État actif (fond gris clair) : SVG remis en noir, opacité standard */
.faq-pad.is-active .faq-pad-deco { opacity: 0.18; }
.faq-pad.is-active .faq-pad-deco img { filter: none; }
/* Invitation à sélectionner un thème — posée à droite du titre.
Empilement vertical : texte au-dessus, flèche en dessous (qui pointe
vers la grille des pads). Animation pulse vers le BAS, conformément
à la nouvelle direction de la flèche. */
.faq-hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
color: rgba(0, 0, 0, 0.55);
text-align: center;
/* Décalage du bas pour aligner la flèche avec la ligne de base du
titre — la flèche se retrouve juste au-dessus des pads, prolongement
visuel naturel. */
padding-bottom: 6px;
animation: faq-hint-pulse 2.4s ease-in-out infinite;
}
.faq-hint-arrow {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.faq-hint-text {
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
@keyframes faq-hint-pulse {
0%, 100% { transform: translateY(0); opacity: 0.85; }
50% { transform: translateY(3px); opacity: 1; } /* descend vers les pads */
}
/* Titre verticalement centré dans le pad (par-dessus le picto), à gauche
— Montserrat capitales, plus de présence sans alourdir. */
.faq-pad-title {
position: relative;
z-index: 1;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.25;
text-transform: uppercase;
margin: 0;
}
/* Caption en bas du pad — positionnée en absolu, alignée à gauche.
Pad par défaut = fond noir → texte clair ; pad actif = fond blanc
→ texte foncé. */
.faq-pad-short {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
z-index: 1;
font-size: 11px;
font-weight: 400;
line-height: 1.4;
color: rgba(255, 255, 255, 0.65);
margin: 0;
}
.faq-pad.is-active .faq-pad-short {
color: rgba(0, 0, 0, 0.6);
}
/* Zone contenu : extras éventuels (téléchargement, pictos…) puis Q/R */
.faq-content {
margin-bottom: 56px;
}
/* ----------------------------------------------------------------
.faq-extras — bandeau spécifique au thème, juste sous l'en-tête.
Variantes :
.faq-extras--download → bouton + hint mono à droite (flèche gauche)
.faq-extras--icons → bandeau de logos sur une seule ligne
---------------------------------------------------------------- */
.faq-extras {
margin: 0 0 28px;
}
/* ===== Variante téléchargement =====
Hint à gauche (texte mono + flèche droite), bouton à droite.
Le hint pulse vers la droite pour mener l'œil vers le bouton. */
.faq-extras--download {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap; /* repli propre si la place manque */
gap: 14px 18px;
}
.faq-extras-btn {
/* hérite de .cf-btn (pilule noire). align-items center pour aligner
le picto sur la ligne de base du label. */
align-items: center;
flex-shrink: 0;
}
/* Picto PDF — fichier externe (brands/pdf.svg).
SVG en couleurs (rouge + gris clair) qui reste lisible aussi bien
sur le bouton noir au repos que sur le bouton blanc au hover. */
.faq-extras-doc {
width: 18px;
height: 18px;
flex-shrink: 0;
display: block;
}
/* Hint à gauche : texte mono + flèche qui pulse vers la droite.
Même police et même esprit que `.faq-hint` (CHOISISSEZ UN THÈME…). */
.faq-extras-hint {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: rgba(0, 0, 0, 0.55);
animation: faq-extras-pulse-right 2.4s ease-in-out infinite;
}
.faq-extras-hint-arrow {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.faq-extras-hint-text {
font-family: 'Courier New', ui-monospace, monospace;
font-size: 12px;
font-weight: 700; /* léger gras → meilleure lisibilité */
letter-spacing: 0.08em;
text-transform: uppercase;
/* Pas de white-space: nowrap — laisse le texte se replier sur 2
lignes si la place est limitée. */
line-height: 1.35;
max-width: 360px;
}
@keyframes faq-extras-pulse-right {
0%, 100% { transform: translateX(0); opacity: 0.85; }
50% { transform: translateX(4px); opacity: 1; }
}
/* ===== Variante grille de logos =====
Tous sur UNE seule ligne, sans label sous l'icône.
Les pictos sont dimensionnés par leur HAUTEUR — la largeur s'adapte
au ratio natif de chaque SVG. Cela permet aux logos rectangulaires
(ex. Apple Digital Masters, ratio ~1.85) d'apparaître à la même
hauteur que les logos carrés.
`flex-wrap: nowrap` côté desktop ; `flex-wrap: wrap` côté mobile
(cf. media query plus bas). */
.faq-extras-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.faq-extras-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 1; /* peut se compresser si besoin */
flex-grow: 0;
min-width: 0;
opacity: 0.78;
transition: opacity 0.18s ease;
}
.faq-extras-icon:hover { opacity: 1; }
.faq-extras-icon img {
height: 32px; /* hauteur unifiée */
width: auto; /* largeur libre, suit le ratio natif */
max-width: 88px; /* garde-fou pour les logos paysage */
object-fit: contain;
display: block;
}
/* Liste questions/réponses */
.faq-qa {
min-width: 0;
}
.faq-qa-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
padding: 26px 0;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
transition: background-color 0.18s ease;
}
.faq-qa-item:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.faq-qa-item:hover {
background: rgba(0, 0, 0, 0.02);
}
.faq-qa-body {
min-width: 0;
}
.faq-qa-q {
font-size: 17px;
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.3;
margin: 0;
color: #000;
}
.faq-qa-a {
font-size: 14.5px;
line-height: 1.65;
font-weight: 400;
margin-top: 16px;
max-width: 720px;
}
/* Spécificité .panel-content .faq-qa-a p (0,2,1) > .panel-content p (0,1,1)
sinon les paragraphes de réponse héritent de la règle générique. */
.panel-content .faq-qa-a p {
margin: 0;
color: rgba(0, 0, 0, 0.78);
line-height: 1.65;
}
.panel-content .faq-qa-a p.faq-p-spaced { margin-top: 0.9em; }
.faq-qa-toggle {
width: 32px;
height: 32px;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #000;
flex-shrink: 0;
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
transition: background 0.18s ease, color 0.18s ease;
}
.faq-qa-item.is-open .faq-qa-toggle {
background: var(--texte-noir);
color: #fff;
border-color: var(--texte-noir);
}
/* Bandeau noir contact en pied — reproduit la pose de v02 (knob filigrane) */
.faq-contact {
position: relative;
overflow: hidden;
background: #000;
color: #fff;
padding: 44px 48px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
border-radius: 4px;
margin-top: 32px;
}
/* Knob SVG en filigrane (très discret) — placé à droite façon design v02 */
.faq-contact-deco {
position: absolute;
right: -50px;
top: -30px;
width: 280px;
height: 280px;
opacity: 0.08;
pointer-events: none;
}
.faq-contact-deco img {
width: 100%;
height: 100%;
object-fit: contain;
/* L'asset est noir d'origine — on l'inverse pour qu'il soit visible
en blanc sur fond noir */
filter: invert(1);
}
.faq-contact-text { position: relative; z-index: 1; }
.faq-contact-kicker {
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 14px;
}
.faq-contact-title {
font-size: 32px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 12px;
line-height: 1.1;
}
.faq-contact-italic {
font-style: italic;
font-weight: 400;
}
/* IMPORTANT — sélecteur volontairement plus spécifique (.panel-content
.faq-contact-lede) pour battre la règle générique `.panel-content p`
(cf. ligne ~444 : `.panel-content p { color: var(--texte-noir); }`)
qui forçait sinon le texte en quasi-noir, donc invisible sur fond noir. */
.panel-content .faq-contact-lede {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
margin: 0;
max-width: 460px;
line-height: 1.55;
}
/* Bouton arrondi : réutilise .cf-btn (pilule), version "claire sur fond noir" */
.faq-contact-btn.cf-btn {
position: relative;
z-index: 1;
background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 14px 22px;
text-decoration: none;
flex-shrink: 0;
white-space: nowrap;
}
.faq-contact-btn.cf-btn:hover {
background: #fff;
color: #000;
}
/* ---------- Responsive (≤ 760 px) ---------- */
@media (max-width: 760px) {
.section-bigtitle,
.faq-bigtitle { font-size: 38px; }
}
/* ---------- Mobile PORTRAIT uniquement : sous-titres et baseline -50%
------------------------------------------------------------------
En portrait, les gros sous-titres éditoriaux (« COMMENT / ça se passe »,
« Tout savoir / avant de masteriser », « Parlons / de votre projet »…)
et la baseline d'accueil (« Des oreilles, des machines, quinze ans… »)
s'affichent trop gros pour la largeur réduite. On halve la taille
uniquement dans ce mode. Le mode paysage (mobile et desktop) garde
les valeurs précédentes. */
@media (max-width: 760px) and (orientation: portrait) {
/* ATTENTION SPÉCIFICITÉ :
- .panel-content h1 (0,1,1) écrase .section-bigtitle (0,1,0)
→ c'est lui qui dicte la taille des sous-titres dans les panneaux.
- .home-baseline .section-bigtitle (0,2,0) écrase .section-bigtitle.
On cible donc les sélecteurs RÉELLEMENT actifs, pas .section-bigtitle. */
.panel-content h1 { font-size: 18px; } /* 24 → 18 (sous-titres en panneau, entre-deux) */
.home-baseline .section-bigtitle { font-size: 18px; } /* 24 → 18 (baseline d'accueil, entre-deux) */
/* .faq-bigtitle reste sous .section-bigtitle hors panneau si jamais réutilisé */
.section-bigtitle,
.faq-bigtitle { font-size: 19px; } /* 38 → 19 (sécurité hors panneau) */
}
@media (max-width: 760px) {
/* En-tête : pas de place pour mettre le hint à côté d'un titre
déjà large — on bascule en colonne, titre à gauche / hint centré
en dessous (plus aéré qu'un calage à gauche). La flèche pointe
toujours les pads. */
.faq-header {
flex-direction: column;
align-items: stretch; /* le hint peut s'étendre pour centrer */
gap: 14px;
}
.faq-hint {
align-self: center; /* centré dans la colonne */
align-items: center; /* texte + flèche centrés à l'intérieur */
text-align: center;
padding-bottom: 0;
}
.faq-hint-text { font-size: 11px; }
/* Sélecteur : grille 2×2 de pads rectangulaires (au lieu de 4 carrés
trop petits sur mobile). On retrouve la place pour un titre +50 %
et la caption courte qu'on cachait avant. */
.faq-console {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.faq-pad {
aspect-ratio: auto; /* libère la hauteur fixe du carré */
min-height: 110px;
padding: 14px 14px 12px;
align-items: flex-start; /* titre en haut, caption en bas */
}
/* Titre +50 % par rapport à la version desktop mobile précédente
(12 → 18). */
.faq-pad-title {
font-size: 18px;
line-height: 1.2;
letter-spacing: 0.03em;
}
/* Caption réintégrée sur mobile (était masquée). */
.faq-pad-short {
display: block;
left: 14px;
right: 14px;
bottom: 12px;
font-size: 12px;
line-height: 1.35;
}
/* Picto un peu plus discret pour ne pas écraser le texte
dans le format rectangulaire. */
.faq-pad-deco { right: -10%; top: -12%; width: 70%; height: 110%; }
/* Extras mobile : un peu plus compact */
.faq-extras { margin-bottom: 22px; }
/* Bandeau téléchargement : on garde la mise en ligne (texte + bouton
sur la même rangée). Le texte se replie naturellement sur plusieurs
lignes si la place manque, le bouton reste à droite. */
.faq-extras--download {
flex-wrap: nowrap; /* pas de saut de ligne du bouton */
gap: 12px;
}
.faq-extras-hint { flex: 1 1 auto; min-width: 0; }
.faq-extras-hint-text { max-width: none; }
/* Grille de logos : on autorise le repli sur plusieurs lignes — pas
la place pour 11 logos en une seule ligne sur mobile. */
.faq-extras-grid {
flex-wrap: wrap;
justify-content: center;
gap: 14px 16px;
}
.faq-extras-icon img { height: 28px; max-width: 72px; }
.faq-contact {
grid-template-columns: 1fr;
padding: 32px 24px;
}
.faq-contact-btn.cf-btn {
width: 100%;
justify-content: center;
}
}
/* ====================================================================
SECTION TARIFS — V02 « Plans inclus »
--------------------------------------------------------------------
Trois cartes empilées (mastering stéréo / stem 6 / stem 10).
À gauche : pictogramme lampe (off → on au survol) + nom + prix HT
(et TTC calculé automatiquement) + sous-titre.
À droite : « Inclus » + ticks.
La carte du milieu est légèrement assombrie (fond gris doux) pour
marquer la formule la plus demandée — sans contraste agressif.
Sous les cartes : bandeau « Tarifs accessoires » avec deux boutons
(« Voir tous les tarifs » qui ouvre un panneau en overlay au-dessus
du contenu, et « Télécharger PDF »). Pied : mention HT/TVA + lien
« Demander un devis ↗ » qui ramène à la section Contact.
==================================================================== */
/* Wrapper du rendu — la section #tarifs hérite déjà des espaces .panel-section */
.tarifs-render {
display: block;
}
/* Phrase d'accroche optionnelle (cf. content.fr.js → tarifs.lede) */
.tarifs-lede {
font-size: 14px;
line-height: 1.55;
color: var(--texte-gris);
max-width: 640px;
margin: 0 0 28px 0;
}
/* -------- Grille des 3 cartes -------- */
.tarifs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 28px;
}
/* Carte « formule » :
┌──────────┬────────────────────────────────────┐
│ │ TITRE │
│ LAMPE ├──────────────┬─────────────────────┤
│ (XL) │ prix + desc │ inclus + ticks │
└──────────┴──────────────┴─────────────────────┘
La lampe occupe les deux lignes (grid-row: 1 / 3), le corps droit
contient le titre puis une sous-grille deux colonnes. */
.tarifs-card {
position: relative;
display: block;
/* Padding-left réservé à la lampe : 6 (inset) + 72 (largeur lampe)
+ 12 (gap avant le texte) = 90. La lampe est en position:absolute
et occupe TOUTE la hauteur de la carte (pas seulement la hauteur
du bloc texte) — elle peut donc être nettement plus grande sans
gonfler le contenu, en utilisant le padding vertical comme
« territoire » lampe. */
padding: 20px 16px 20px 90px;
/* Fond : gris très clair PLEIN (cartes 1 & 3) — pas de transparence
pour que le diaporama d'arrière-plan ne transparaisse pas à
travers la fenêtre de contenu. La carte 2 mise en avant passe
à un gris légèrement plus marqué — voir .tarifs-card--feature. */
background: #ececec;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
}
/* Carte mise en avant (formule du milieu) — gris un peu moins clair
pour signaler la formule sans contraste agressif. */
.tarifs-card--feature {
background: #d7d7d7;
border-color: rgba(0, 0, 0, 0.12);
}
/* -------- Lampe — bandeau gauche, pleine hauteur de carte --------
Le wrap est positionné en absolu sur le côté gauche de la carte,
du haut au bas (avec un petit inset pour respirer). La lampe à
l'intérieur, elle aussi en absolu, remplit ce cadre. Le SVG
s'auto-dimensionne en "contain" via max-h/max-w 100%.
Conséquence : la lampe peut être nettement plus haute que le
contenu textuel à droite — elle occupe presque toute la hauteur
de la bulle, alors que la carte reste compacte. */
.tarifs-lampe-wrap {
position: absolute;
top: 4px;
bottom: 4px;
left: 6px;
width: 72px;
}
.tarifs-lampe {
position: absolute;
inset: 0; /* remplit le wrap (donc la cellule grid) */
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
/* Allumage du tube au survol — deux couches superposées :
::before → halo chaud large derrière la lampe, façon lueur qui
se diffuse dans le verre et rayonne autour du tube
(z-index 0, sous le SVG).
::after → lueur localisée du FILAMENT, centrée à ~67% depuis le
haut (entre la grille et le socle, repère relevé sur
l'ancien SVG « lampe-on »). Posée DEVANT le SVG pour
transparaître à travers la silhouette sombre.
Tout est volontairement modéré : on évoque la chauffe, on ne
simule pas un projecteur. */
.tarifs-lampe::before {
content: "";
position: absolute;
inset: -25%;
background: radial-gradient(
ellipse 50% 65% at 50% 55%,
rgba(255, 170, 70, 0.18) 0%,
rgba(255, 125, 30, 0.09) 35%,
rgba(255, 95, 15, 0.03) 60%,
transparent 80%
);
filter: blur(16px);
opacity: 0;
transition: opacity .45s ease;
pointer-events: none;
z-index: 0;
}
.tarifs-lampe::after {
content: "";
position: absolute;
left: 50%;
top: 67%;
width: 62%;
height: 13%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(255, 200, 120, 0.70) 0%,
rgba(255, 155, 55, 0.45) 35%,
rgba(255, 105, 20, 0.18) 65%,
transparent 85%
);
filter: blur(8px);
opacity: 0;
transition: opacity .45s ease;
pointer-events: none;
z-index: 2;
}
.tarifs-lampe-svg {
display: block;
/* Le SVG s'adapte au cadre disponible en gardant son ratio
(équivalent object-fit: contain pour une ![]()
). */
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
position: relative;
z-index: 1;
transition: filter .45s ease;
}
/* Allumage au hover : halo + filament + très légère aura chaude
sur la silhouette (drop-shadow discret pour intégrer le tube
dans sa lueur, sans le faire rayonner partout). */
.tarifs-card:hover .tarifs-lampe::before,
.tarifs-card:focus-within .tarifs-lampe::before { opacity: 1; }
.tarifs-card:hover .tarifs-lampe::after,
.tarifs-card:focus-within .tarifs-lampe::after { opacity: 1; }
.tarifs-card:hover .tarifs-lampe-svg,
.tarifs-card:focus-within .tarifs-lampe-svg {
filter: drop-shadow(0 0 4px rgba(255, 165, 60, 0.35));
}
/* -------- Corps droit — tableau à 2 colonnes (desktop) -------- */
.tarifs-card-body {
display: block;
min-width: 0;
}
/* Tableau interne : colonne A (titre/sous-titre/prix) | colonne B
(inclus + ticks). Les deux colonnes démarrent en haut. La colonne A
se dimensionne au contenu, la colonne B prend tout l'espace restant. */
.tarifs-card-cols {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: start;
}
/* ---- Colonne A : titre + sous-titre + prix, empilés verticalement ---- */
.tarifs-card-info {
display: flex;
flex-direction: column;
gap: 26px; /* la bulle respire et la lampe grandit */
min-width: 0;
}
/* Bloc titre : nom au-dessus, sous-titre dessous (pas inline). */
.tarifs-title-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.tarifs-nom {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 17px;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--texte-noir);
margin: 0;
line-height: 1.05;
}
/* Sous-titre — Montserrat 500, capitales, gris ~70%. */
.tarifs-sous {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 11.5px;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.55);
margin: 0;
}
/* Bloc prix : « 80€ » à gauche, stack mono « HT / track » + « 96€ TTC »
à sa droite (deux lignes courtes pour ne pas pousser horizontalement). */
.tarifs-prix-block {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.tarifs-prix-num {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 28px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--texte-noir);
flex-shrink: 0;
}
.tarifs-prix-unit {
display: flex;
flex-direction: column;
gap: 0;
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--texte-gris);
line-height: 1.4;
}
.tarifs-prix-unit-l {
display: block;
white-space: nowrap;
}
/* ---- Colonne B : « Inclus » + ticks ---- */
.tarifs-card-inclus {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tarifs-inclus-h {
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--texte-gris);
}
.tarifs-inclus {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px; /* écart entre les ticks */
}
.tarifs-inclus li {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 12px;
line-height: 1.65; /* liste plus haute → lampe plus grande */
color: var(--texte-noir);
}
.tarifs-check {
flex: 0 0 13px;
width: 13px;
height: 13px;
border-radius: 999px;
background: var(--texte-noir);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
margin-top: 2px;
}
/* -------- Mention HT/TVA — directement sous les 3 cartes -------- */
.tarifs-mention {
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--texte-gris);
text-align: center;
margin: 4px 0 22px 0;
}
/* -------- Bandeau d'actions — deux boutons sur une ligne --------
Voir tous les tarifs (gauche) ↔ Demander un devis (droite).
Le bouton « Télécharger PDF » a quitté ce bandeau ; il reste
accessible depuis le pied de l'overlay « Tarifs » (popup). */
.tarifs-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
/* Petite flèche mono en bout de bouton (↓ / ↑ / ↗ selon le contexte). */
.tarifs-toggle-arr {
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 400;
margin-left: 2px;
}
/* Boutons de la section et de l'overlay : ne s'écrasent pas en flex */
.tarifs-pdf-btn,
.tarifs-toggle,
.tarifs-devis-btn {
align-items: center;
flex-shrink: 0;
}
/* ====================================================================
OVERLAY ACCESSOIRES — panneau au-dessus du contenu
--------------------------------------------------------------------
Position fixe sur le viewport : le panneau couvre toute la fenêtre,
y compris la nav latérale, façon « modal léger ». Avantages :
— pas d'interaction avec le scroll de .panel-content,
— le visiteur retrouve sa position de scroll intacte à la fermeture,
— comportement identique sur desktop et mobile.
Clic sur le voile ou Échap → fermeture (cf. js/tarifs.js).
==================================================================== */
/* ====================================================================
POP-UP OVERLAY — style commun, partagé entre Tarifs et Équipement
--------------------------------------------------------------------
Sélecteurs groupés : .tarifs-overlay (utilisé par js/tarifs.js) et
.popup-overlay (utilisé par les autres sections, ex. Équipement).
On peut donc poser une nouvelle pop-up dans n'importe quelle section
en réutilisant les classes .popup-overlay / .popup-overlay-panel /
.popup-overlay-head / .popup-overlay-close / .popup-overlay-body /
.popup-overlay-foot — l'apparence reste identique à celle des Tarifs.
==================================================================== */
.tarifs-overlay,
.popup-overlay {
position: fixed;
inset: 0;
background: rgba(20, 16, 12, 0.40);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.tarifs-overlay.is-open,
.popup-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.tarifs-overlay[hidden],
.popup-overlay[hidden] {
display: none;
}
.tarifs-overlay-panel,
.popup-overlay-panel {
background: #fff;
border-radius: 16px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 920px;
/* Le panneau se dimensionne sur le contenu (en flex-column) ; on
le borne à 95% du viewport pour laisser un peu d'air autour.
Si l'écran est assez grand, l'ensemble du contenu s'affiche
sans aucune barre de défilement interne. Sinon, .tarifs-acc-list
ou .popup-overlay-body prend le relais avec son overflow-y: auto. */
max-height: 95%;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px);
transition: transform .25s ease;
}
.tarifs-overlay.is-open .tarifs-overlay-panel,
.popup-overlay.is-open .popup-overlay-panel {
transform: translateY(0);
}
.tarifs-overlay-head,
.popup-overlay-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 26px 14px 26px;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
gap: 16px;
}
/* Bloc gauche du header : lampe décorative + (titre + mention).
Sélecteurs groupés → réutilisable par toute pop-up générique. */
.tarifs-overlay-head-l,
.popup-overlay-head-l {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.tarifs-overlay-lamp,
.popup-overlay-lamp {
display: inline-block;
position: relative; /* contexte pour les pseudo-elts halo/filament */
height: 64px;
flex-shrink: 0;
line-height: 0;
}
.tarifs-overlay-lamp img,
.popup-overlay-lamp img {
display: block;
height: 100%;
width: auto;
}
/* Rangée de 4 lampes (utilisée par la pop-up Équipement) */
.popup-overlay-lamp-row {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.tarifs-overlay-head-text,
.popup-overlay-head-text {
min-width: 0;
}
.tarifs-overlay-title,
.popup-overlay-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--texte-noir);
}
.tarifs-overlay-sub,
.popup-overlay-sub {
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--texte-gris);
margin-top: 4px;
}
.tarifs-overlay-close,
.popup-overlay-close {
background: none;
border: none;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: var(--texte-noir);
padding: 0 4px;
}
/* Corps scrollable du popup générique (équivalent de .tarifs-acc-list
pour les Tarifs). Le panneau ayant un max-height: 95%, le débordement
éventuel est encaissé ici via overflow-y: auto. */
.popup-overlay-body {
padding: 18px 26px 22px;
overflow-y: auto;
flex: 1;
}
/* Liste des accessoires — lignes mono, prix à droite */
.tarifs-acc-list {
padding: 8px 26px 14px;
overflow-y: auto;
flex: 1;
}
.tarifs-acc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-family: 'Courier New', ui-monospace, monospace;
font-weight: 700; /* lisibilité mobile : Courier en gras */
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--texte-noir);
border-bottom: 1px dotted rgba(0, 0, 0, 0.18);
padding: 10px 0;
}
.tarifs-acc-row:last-child { border-bottom: 0; }
.tarifs-acc-lab { flex: 1; line-height: 1.4; }
.tarifs-acc-pr { white-space: nowrap; font-weight: 700; }
/* Séparateur entre le rappel des 3 formules et la liste accessoires —
un trait fin, sans étiquette, qui suffit à structurer la liste. */
.tarifs-acc-sep {
height: 1px;
background: rgba(0, 0, 0, 0.12);
margin: 14px 0 6px;
}
.tarifs-overlay-foot {
padding: 14px 26px 22px 26px;
border-top: 1px solid rgba(0, 0, 0, 0.10);
display: flex;
justify-content: flex-end;
}
/* ====================================================================
RESPONSIVE TARIFS
==================================================================== */
@media (max-width: 900px) {
.tarifs-card {
/* Lampe absolue à gauche, padding-left réservé : 4 + 56 + 10 = 70 */
padding: 14px 14px 14px 70px;
}
.tarifs-lampe-wrap {
top: 4px;
bottom: 4px;
left: 4px;
width: 56px;
}
/* Mobile — nouvelle grille à 2 colonnes / 2 lignes :
┌──────────────┬──────────┐
│ TITRE │ │
│ sous-titre │ PRIX │ ← prix vcentered (align-self: center)
├──────────────┤ HT/TRACK│ contre l'ensemble titre + inclus
│ Inclus │ 96€ TTC │
│ ✓ ... │ │
└──────────────┴──────────┘
Astuce : on utilise `display: contents` sur .tarifs-card-info
pour que ses enfants (title-row, prix-block) deviennent
directement enfants de la grille .tarifs-card-cols et puissent
se positionner via grid-area. Plus de blanc entre titre et
inclus, et le prix peut s'étendre sur les deux lignes. */
.tarifs-card-cols {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"title price"
"inclus price";
gap: 0 16px;
align-items: start;
}
.tarifs-card-info {
display: contents;
}
.tarifs-title-row {
grid-area: title;
min-width: 0;
}
.tarifs-prix-block {
grid-area: price;
align-self: center; /* vcentered contre titre + inclus */
flex-direction: column; /* override desktop : empile 80€ puis unité */
align-items: flex-end;
gap: 6px;
}
.tarifs-card-inclus {
grid-area: inclus;
margin-top: 12px; /* léger air entre titre et inclus */
}
.tarifs-prix-unit {
align-items: flex-end; /* HT/TRACK et 96€ TTC alignés à droite */
text-align: right;
}
.tarifs-nom { font-size: 15px; }
/* Prix agrandi en mobile (28→34) pour mieux porter le bloc à droite */
.tarifs-prix-num { font-size: 34px; }
.tarifs-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.tarifs-actions .cf-btn { justify-content: center; }
.tarifs-mention { margin-bottom: 16px; }
.tarifs-overlay,
.popup-overlay {
padding: 12px;
align-items: center;
}
.tarifs-overlay-panel,
.popup-overlay-panel {
max-height: 88%;
}
.tarifs-acc-row {
flex-direction: column;
gap: 4px;
}
}
/* ============================================================
GALERIE PHOTO — section Studio (après la vidéo YouTube)
------------------------------------------------------------
Choix de design validés (cf. Claude Design) :
- Layout justifié, vignettes XXS (~100px de haut).
- Hover : zoom doux (scale 1.045).
- Lightbox : fond vignette (radial sombre), flèches double chevron.
Préfixes `sg-` (studio-gallery) pour éviter toute collision.
============================================================ */
/* Conteneur — espacement vertical par rapport à la vidéo YouTube au-dessus.
Largeur naturelle de la fenêtre de contenu (pas de padding latéral
supplémentaire — le panneau studio gère déjà sa marge). */
.studio-gallery {
margin: clamp(48px, 7vw, 96px) 0 0;
display: flex;
flex-direction: column;
gap: 3px; /* gap inter-rangs (XXS, cadence serrée) */
}
/* Une rangée du layout justifié.
Hauteur fixe → toutes les vignettes ont la même hauteur visuelle.
flex-grow piloté par --ar : chaque vignette occupe une largeur
proportionnelle à son aspect ratio (Flickr-style). */
.studio-gallery .sg-row {
display: flex;
gap: 3px; /* gap inter-vignettes — aligné sur le gap inter-rangs */
height: 120px; /* XXS +20% — fichiers vignettes inchangés pour l'instant */
}
/* Vignette individuelle.
- flex-basis: 0 + flex-grow: --ar → largeur proportionnelle au ratio.
- min-width: 80px → garde une largeur minimale acceptable même pour
des portraits étroits dans une rangée chargée.
- overflow:hidden + isolation:isolate → confine l'image zoomée et
évite les artefacts visuels du transform. */
.studio-gallery .sg-thumb {
position: relative;
height: 100%;
flex-grow: var(--ar);
flex-basis: 0;
min-width: 80px;
overflow: hidden;
background: #f6f5f3; /* placeholder neutre avant chargement de l'image */
cursor: zoom-in;
isolation: isolate;
outline: none;
border-radius: 4px; /* léger arrondi — l'overflow:hidden ci-dessus clipe l'image */
}
.studio-gallery .sg-thumb:focus-visible {
outline: 1px solid rgba(17, 17, 17, 0.5);
outline-offset: 2px;
}
/* Image OU vidéo dans la vignette (même style pour les deux).
- object-fit: cover → remplit la box sans déformer (crop léger possible).
- transition lente sur transform → effet de zoom au survol fluide.
- will-change: transform → hint navigateur pour rendu hardware-accel. */
.studio-gallery .sg-thumb img,
.studio-gallery .sg-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
pointer-events: none; /* clic passe à la div parente (cf. handler délégué) */
}
/* Overlay play sur la vignette vidéo — petit triangle dans un cercle
semi-transparent. Indique visuellement le caractère vidéo. */
.studio-gallery .sg-thumb .sg-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 2;
color: #fff;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.studio-gallery .sg-thumb .sg-play svg {
width: 36px;
height: 36px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
background: rgba(0, 0, 0, 0.35);
border-radius: 50%;
padding: 8px;
box-sizing: content-box;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Hover : zoom doux (1.045).
Discret, élégant — pas d'effet voyant. Désactivé sur tactile pour éviter
un état figé après un tap (le hover reste collé sur certains devices). */
@media (hover: hover) and (pointer: fine) {
.studio-gallery .sg-thumb:hover img,
.studio-gallery .sg-thumb:hover video {
transform: scale(1.045);
}
/* L'overlay play se rétracte légèrement au hover pour souligner le mouvement */
.studio-gallery .sg-thumb.sg-is-video:hover .sg-play {
transform: scale(0.92);
}
}
/* Tailles XXS un peu plus généreuses sur grands écrans, réduites sur mobile —
on garde la même cadence visuelle quelle que soit la fenêtre. */
@media (min-width: 1200px) {
.studio-gallery .sg-row { height: 144px; }
}
@media (max-width: 600px) {
.studio-gallery .sg-row { height: 96px; }
}
/* ============================================================
LIGHTBOX — agrandissement plein écran
------------------------------------------------------------
Fond "vignette" : radial-gradient sombre (effet pellicule
argentique), plus élégant qu'un noir uni plat.
Le markup est injecté dans par gallery.js.
IMPORTANT — fermeture propre :
On utilise `visibility: hidden` (et non `pointer-events: none`)
pour masquer la lightbox quand elle est fermée. Raison :
`pointer-events: none` sur le parent est outrepassé par les
enfants qui déclarent `pointer-events: auto` (cas du média et
des boutons natifs). Résultat : la lightbox transparente bloquait
les clics sur le site sous-jacent après fermeture.
`visibility: hidden` désactive complètement l'élément et tous
ses descendants, sans exception. La transition est retardée
(delay 0.45s) pour ne s'appliquer qu'après le fade-out.
============================================================ */
.sg-lb {
position: fixed;
inset: 0;
z-index: 10000; /* au-dessus de la fenêtre de contenu et de tous les overlays existants */
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.sg-lb.sg-open {
opacity: 1;
visibility: visible;
transition: opacity 0.45s ease, visibility 0s linear 0s;
}
/* Fond vignette — radial-gradient sombre, plus dense vers les bords.
Cliquer le fond ferme la lightbox (cf. gallery.js). */
.sg-lb-back {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse at center,
rgba(20, 18, 15, 0.6) 0%,
rgba(20, 18, 15, 0.86) 45%,
rgba(8, 7, 6, 0.98) 90%),
#0a0908;
cursor: zoom-out;
}
/* Stage = zone qui contient le média (img ou video).
Dimensions explicites pour que le média ait une boîte de référence
stable, et que `object-fit: contain` puisse calculer correctement. */
.sg-lb-stage {
position: relative;
z-index: 2;
width: min(94vw, 1600px);
height: min(88vh, 1100px);
}
/* Média affiché — pattern canonique de lightbox :
width/height à 100% du stage, et object-fit: contain pour scaler
en préservant l'aspect ratio sans jamais déborder ni couper.
Fonctionne identiquement pour ![]()
et