/* ================= Acloud — design system partagé ================= */ :root{ --noir:#26262A; --camel:#B5673E; --ciel:#D8EEFF; --bleu:#3D6F8E; --creme:#FBF7EE; --ligne:#E8E1D6; --gris:#5C6169; /* --fond = la SURFACE DE PAGE, à distinguer de --creme, qui reste la couleur de charte (texte clair sur noir/camel, halos, mélanges). Passée au blanc le 20/08 (retour Justine « trop crème ») : le crème en aplat continu sur 20 pages faisait du site un objet beige. Il redevient un accent. Un seul jeton, pour que le réglage se refasse en un endroit. */ --fond:#fff; /* Camel foncé : texte camel sur crème uniquement (lisibilité AA). */ --camel-fonce:#8D4F2E; /* Fond alterné et halo des packshots : pas de 6e couleur, des mélanges de la charte (crème + filet, ciel + crème). */ --creme2:color-mix(in srgb, var(--creme) 55%, var(--ligne)); --halo:color-mix(in srgb, var(--ciel) 55%, var(--creme)); /* Typo : --f-title/--f-body font foi. --serif/--sans sont les mêmes, sous les noms qu'emploient le UI kit et le CSS de l'accueil. */ --f-title:'Fraunces',Georgia,'Times New Roman',serif; --f-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; --serif:var(--f-title); --sans:var(--f-body); /* ---- La trame, commune à tout le site (17/08) ---- L'accueil compose dans une trame bornée et centrée ; les pages internes se calaient, elles, sur le bord de l'écran. Deux marges différentes pour un même site. La formule ci-dessous reproduit exactement la trame de l'accueil : au-delà de --trame, la marge est le demi-reste plus la gouttière ; en deçà, la gouttière seule (c'est le rôle du max()). Elle est écrite en 100vw et non en % : une custom property garde son pourcentage non résolu et le recalculerait chez chaque enfant — .block .txt, qui vit dans une colonne de grille, aurait obtenu une marge calculée sur la largeur de sa colonne. */ --trame:1672px; --gut:clamp(20px,2.5vw,44px); --pad:max(var(--gut), calc((100vw - var(--trame)) / 2 + var(--gut))); --h-head:88px; /* La courbe du site (ease-out exponentiel). Elle vivait seulement dans accueil.css ; les huit autres pages en avaient besoin aussi. */ --out:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--fond);color:var(--noir);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* Sur-titre : une seule définition pour tout le site. L'accueil l'appelait .lbl et ne la stylait que dans accueil.css — un composant partagé qui l'émettait sortait donc un sur-titre nu sur toute autre page. */ .over{font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--camel)} .lk{font-size:13px;letter-spacing:.03em;border-bottom:1px solid var(--camel);padding-bottom:3px;display:inline-block;transition:.2s} .lk:hover{color:var(--camel)} h1,h2,h3{font-family:var(--f-title);font-weight:600;letter-spacing:-.01em} h1,h2{font-weight:700} em{font-style:normal;color:var(--camel)} /* ---------- HEADER (composant unique, repris de la landing) ---------- */ /* Se cache au scroll vers le bas, revient au scroll vers le haut (retour client 08/09) — `.is-cache` posée par nav.js selon le sens du scroll, jamais pendant que le menu mobile est ouvert (cf. nav.js : pas de verrou de scroll sur `.is-ouvert`, un header qui se dérobe sous un menu déroulé serait cassé). */ .site-head{position:fixed;inset:0 0 auto;z-index:80; transition:background 200ms ease-out,border-color 200ms ease-out,transform 320ms var(--out); border-bottom:1px solid transparent} .site-head.is-cache{transform:translateY(-100%)} /* ⚠️ L'état du menu mobile s'appelle `is-ouvert`, pas `open` : l'accueil a un `
` (son hero) dont accueil.css style la classe NUE — `min-height:100svh`, `display:grid`, `position:relative`. Posée sur l'en-tête, elle le sortait du flux fixe et jetait le menu déroulé en bas de l'écran, sur l'accueil seulement. Même famille que `is-solide`. */ .site-head.on,.site-head.is-solide{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-color:var(--ligne)} /* Trois colonnes, pas un flex : le menu doit être centré sur la PAGE, pas sur l'espace qui reste entre le logo et le CTA. Deux colonnes 1fr de part et d'autre absorbent la différence de largeur entre les deux (retour Justine 20/08, cf. maquette « landing page.pdf »). */ .site-head .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;padding:20px var(--pad)} .logo{display:flex;align-items:center} .logo img{width:104px;height:auto;display:block} .site-head nav{display:flex;gap:28px;justify-content:center;font-size:16px;letter-spacing:.02em;align-items:center} .site-head nav>a,.has-drop>a{padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color 180ms ease-out} @media(hover:hover) and (pointer:fine){.site-head nav>a:hover,.has-drop>a:hover{border-color:var(--camel)}} .site-head nav a[aria-current]{color:var(--camel)} /* Pastille pleine, comme la maquette « landing page.pdf » (retour Justine 20/08). Elle abandonne les capitales espacées du filet souligné qu'elle remplace : à l'intérieur d'une pastille, .2em d'interlettrage force une largeur que le menu centré paie en décalage. Corps et graisse alignés sur la nav (13px), pas sur `.btn` (12px capitales), qui est le bouton de CONTENU — celui-ci est un élément de barre. Le survol part au camel : c'est la langue du site. Le rayon (12px) est partagé avec la vitrine du hero : ces deux-là forment une famille, l'angle doit être le même des deux côtés de l'écran. ⚠️ Elle est plus haute que le logo (47 contre 39) : c'est elle qui fixe désormais la hauteur de l'en-tête, d'où --h-head recalculé (mesuré, pas déduit : 13px x 1,6 d'interligne = 21, + 24 de padding + 2 de filet = 47). */ .go{justify-self:end;background:var(--noir);color:var(--creme); font-size:13px;font-weight:500;letter-spacing:.01em;text-align:center; padding:12px 26px;border-radius:12px;border:1px solid var(--noir); transition:background 200ms var(--out),border-color 200ms var(--out),color 200ms var(--out)} @media(hover:hover) and (pointer:fine){ .go:hover{background:var(--camel);border-color:var(--camel);color:var(--creme)} } .go[aria-current]{background:var(--camel);border-color:var(--camel);color:var(--creme)} .go:focus-visible{outline:2px solid var(--noir);outline-offset:3px} .has-drop{position:relative;display:inline-flex;align-items:center} .has-drop>a::after{content:"\25BE";font-size:9px;margin-left:5px;color:var(--camel); display:inline-block;transition:transform 320ms var(--out)} .has-drop:hover>a::after,.has-drop:focus-within>a::after{transform:rotate(180deg)} /* Le déroulant prolonge la barre de navigation : même famille, même corps, même interlettrage que les entrées de premier niveau. Il était en Fraunces 15px/400 quand la nav est en Poppins 13px — deux langues dans un seul composant, et une graisse 400 que la passe typo du 15/08 avait laissée derrière elle. Le texte des entrées s'aligne à la verticale sur son parent : le retrait gauche compense leur propre padding. ⚠️ Rayon aligné le 02/09 sur celui des cartes-photo (16px, --r-card) : un seul rayon partout sur le site (retour client), plutôt que l'angle net propre au menu qu'un commentaire plus ancien revendiquait ici. `overflow` passe donc à hidden, sinon le bandeau de surbrillance et le dernier filet dépasseraient des coins arrondis. */ .drop{position:absolute;top:calc(100% + 9px);left:-16px;transform:translateY(-6px) scale(.96); background:var(--fond);border:1px solid var(--ligne);border-radius:16px;min-width:184px; overflow:hidden; box-shadow:0 20px 44px -30px rgba(38,38,42,.30); opacity:0;visibility:hidden;transform-origin:top left; transition:opacity 180ms ease,transform 340ms var(--out),visibility 340ms; display:flex;flex-direction:column} /* Pont invisible sous le parent : sans lui, traverser les 9px de respiration referme le menu avant qu'on l'atteigne. */ .drop::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px} .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none} /* Surbrillance qui suit le curseur d'une entrée à l'autre, au lieu d'un fond qui s'allume et s'éteint sur place. Le bandeau est posé par le JS ; tant qu'il ne l'est pas, le survol garde son fond, sinon le menu ne répondrait plus. */ .drop-hl{position:absolute;left:0;right:0;top:0;height:0;background:var(--creme2); opacity:0;pointer-events:none;z-index:0; transition:transform 320ms var(--out),height 320ms var(--out),opacity 200ms ease} .drop.hl-active .drop-hl{opacity:1} .drop.has-hl a:hover{background:transparent} .drop a{display:block;position:relative;z-index:1;padding:12px 16px;border-radius:0; font-family:var(--f-body);font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--noir); border-bottom:1px solid var(--ligne); transition:background .16s ease,color .16s ease} .drop a:last-child{border-bottom:0} .drop a:hover{background:var(--creme2);color:var(--camel)} .nav-fin{justify-self:end;display:flex;align-items:center;gap:22px} /* Sélecteur de langue : aux valeurs de la nav (16px, noir), langue active en camel. */ .langues,.langues-mob{display:flex;gap:14px;font-size:16px;letter-spacing:.02em} .langues a,.langues-mob a{color:var(--noir);padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color 180ms ease-out} .langues a[aria-current],.langues-mob a[aria-current]{color:var(--camel);border-color:var(--camel)} @media(hover:hover) and (pointer:fine){.langues a:hover{border-color:var(--camel)}} .langues-mob{display:none} .burger{display:none;font-size:22px;color:var(--noir);cursor:pointer;user-select:none;grid-column:3;justify-self:end} .go-mob{display:none} /* Menu repliable sous 1280px (et non 1000) : entre les deux, menu + sélecteur de langue + « Nous contacter » ne tiennent pas sur une ligne, le bouton passait sur deux. */ @media(max-width:1279px){ .site-head nav{display:none} .go{display:none} .nav-fin{display:none} .site-head.is-ouvert .langues-mob{display:flex;gap:18px} .burger{display:block} .site-head.is-ouvert{background:var(--fond);border-color:var(--ligne)} .site-head.is-ouvert nav{display:flex;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--h-head));overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:flex-start;gap:0;background:var(--fond);border-bottom:1px solid var(--ligne);padding:8px clamp(20px,4.5vw,72px) 16px} .site-head.is-ouvert nav a{padding:11px 0;border-bottom:0} .site-head.is-ouvert .has-drop{width:100%;display:flex;flex-direction:column;align-items:flex-start} .site-head.is-ouvert .drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:0 0 4px 14px;min-width:0;left:auto} .site-head.is-ouvert .drop::before{display:none} .site-head.is-ouvert .drop a{border-bottom:0;padding:11px 0} .site-head.is-ouvert .drop-hl{display:none} .site-head.is-ouvert .drop.has-hl a:hover{background:transparent} .site-head.is-ouvert .go-mob{display:block;color:var(--camel)} } @media(prefers-reduced-motion:reduce){ .drop,.drop a,.site-head,.drop-hl,.has-drop>a::after{transition:none}} /* Le header est en position fixe : compenser sur les pages sans hero pleine hauteur. --h-head = hauteur réelle mesurée. Depuis la pastille du 20/08, c'est ELLE le plus haut des trois enfants, pas le logo : 47 + 2x20 de padding + 1 de filet = 88. */ body:not(.a-hero) main{padding-top:var(--h-head)} /* ---------- HERO (produit) ---------- */ /* ================= COMPOSITION DES PAGES INTERNES ================= L'accueil validé et les planches de Juie (page besoins, page actu) parlent la même langue : sur-titre camel très espacé, grand titre serif aligné au bord, intro en colonne à droite sur la même ligne de base, aucun centrage. Le gabarit produit, lui, avait été composé centré. On reprend le motif .hd de l'accueil, une échelle un cran en dessous : une page produit porte onze sections de contenu factuel, pas six respirations de landing. L'accueil n'emploie aucune de ces classes (elle a les siennes dans accueil.css) et n'est donc pas concernée. */ .hero{text-align:left;padding:clamp(48px,9vw,88px) var(--pad) clamp(28px,4vw,40px)} .hero h1{font-size:clamp(46px,7.2vw,88px);line-height:.94;letter-spacing:-.03em;max-width:11ch;margin:16px 0 22px} .hero .sub{font-size:clamp(15px,2.2vw,18px);color:var(--gris);max-width:46ch;margin:0 0 30px} /* ---------- PAGE HERO (pages secondaires) ---------- */ .pagehero{padding:clamp(56px,9vw,104px) var(--pad) clamp(36px,5vw,56px); max-width:calc(1100px + var(--pad) * 2)} /* la mesure porte sur le texte, pas sur le bloc + ses marges */ .pagehero h1{font-size:clamp(44px,7.4vw,86px);line-height:1;letter-spacing:-.03em;margin:14px 0 20px;max-width:14ch} .pagehero p{font-size:clamp(15px,2vw,18px);color:var(--gris);max-width:46ch} /* ---------- STATEMENT ---------- */ .statement{text-align:left;padding:clamp(64px,11vw,120px) var(--pad); display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(24px,5vw,90px)} /* La mesure se contraint sur le titre : posée sur la section, en border-box, elle se cumulait au padding et écrasait le texte à 101px de large. */ .statement h2{grid-column:2;font-size:clamp(28px,3.4vw,52px);line-height:1.18;letter-spacing:-.015em;max-width:20ch;margin:0} /* ---------- BLOCKS ALTERNÉS ---------- */ .block{display:grid;grid-template-columns:1fr 1fr;align-items:center} /* --pad est la marge de PAGE : appliquée aux deux côtés d'une colonne de grille demi-largeur, elle étranglait le texte (304px de contenu à 2560px, contre 1140 avant la trame commune). À gauche, le texte se cale sur la trame comme le reste du site ; à droite, il lui faut une gouttière interne, pas la marge du bord de l'écran. `.rev` n'inverse rien en desktop — elle ne sert qu'à l'ordre d'empilement sous 860px — donc le texte est toujours dans la première colonne. */ .block .txt{padding:clamp(40px,7vw,96px) clamp(24px,4vw,70px) clamp(40px,7vw,96px) var(--pad)} .block h2{font-size:clamp(28px,4.4vw,42px);line-height:1.06;margin:14px 0 20px;max-width:16ch} .block p{color:var(--gris);max-width:46ch;margin:0 0 16px} .block .vis{align-self:stretch;min-height:clamp(300px,40vw,480px);display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px)} .block .vis img{width:100%;height:100%;object-fit:contain} .block .vis.tint{background:radial-gradient(62% 62% at 50% 45%, var(--halo) 0%, var(--fond) 80%)} .block .vis.photo{padding:0} .block .vis.photo img{object-fit:cover} @media(max-width:900px){.statement{grid-template-columns:1fr}.statement h2{grid-column:1}} @media(max-width:860px){.block{grid-template-columns:1fr}.block.rev .txt{order:2}.block .vis{min-height:300px} .block .txt{padding-inline:var(--pad)}} /* une seule colonne : le texte retrouve ses deux marges de page */ /* ---------- SECTION HEAD / PADDING ---------- */ /* En-tête de section : sur-titre, titre puis intro empilés (retour client 11/09 — le texte va sous le titre, pas à côté). */ .shead{text-align:left;margin:0 0 clamp(40px,6vw,64px)} .shead h2{font-size:clamp(30px,4.6vw,58px);line-height:1.02; letter-spacing:-.02em;margin-top:14px} .shead p{color:var(--gris);margin-top:14px; max-width:48ch;font-size:clamp(16px,1.3vw,19.5px)} .sec-pad{padding:clamp(70px,11vw,120px) var(--pad)} .sec-pad.no-top{padding-top:0} /* Bande alternée : blanche depuis le 20/08 comme le reste des surfaces de page. Elle ne se distingue donc plus par la couleur — c'est assumé, le rythme des pages internes tient à l'espacement, pas à un aplat beige. */ .tint-bg{background:var(--fond)} /* ---------- TRIO (piliers / tailles / versions / piliers atelier) ---------- */ /* La grille s'aligne sur le titre de section, comme les huit autres pages depuis la passe DA du 16/08. Elle était bornée à 1000px et centrée — reste du gabarit d'avant, qui laissait 330px de vide sous un titre aligné au bord. */ .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,5vw,58px);text-align:left} /* Le filet camel remplace les pictogrammes : ils étaient en #444a5e, une couleur absente de la charte, et les trois mêmes servaient sur quatre pages, y compris là où ils ne voulaient rien dire. Le filet est la signature du site. */ .pil::before{content:"";display:block;width:28px;height:1px;background:var(--camel);margin:0 0 22px} /* Le filet se trace, le texte le suit. Le trait qui se dessine est déjà le geste de « Le problème » sur l'accueil, et la cascade de 90ms celle des vignettes de réalisations : la section parle la même langue que le reste du site plutôt que d'ajouter un fondu-montée de plus. `.anim` n'est posée que par le JS — sans lui, la section s'affiche telle quelle au lieu de rester blanche. `scaleX` plutôt que `width` : le compositeur suffit, aucun recalcul de mise en page. */ .trio .pil{--i:0} .trio .pil:nth-child(2){--i:1} .trio .pil:nth-child(3){--i:2} .trio.anim .pil::before{transform:scaleX(0);transform-origin:left; transition:transform 820ms var(--out) calc(var(--i) * 130ms)} /* Le texte ne part jamais d'opacity:0. Si la révélation ne se déclenchait pas (onglet ouvert en arrière-plan, moteur de rendu sans peinture), il resterait invisible et la section serait servie blanche. Décalé de 8px, il est lisible dans tous les cas ; seul le filet part de rien, et son absence ne cache aucun contenu. */ .trio.anim .pil h3,.trio.anim .pil p{transform:translateY(16px); transition:transform 700ms var(--out) calc(var(--i) * 130ms + 180ms)} .trio.anim.in .pil::before{transform:scaleX(1)} .trio.anim.in .pil h3,.trio.anim.in .pil p{transform:none} @media(prefers-reduced-motion:reduce){ .trio.anim .pil::before,.trio.anim .pil h3,.trio.anim .pil p{ transition:none;transform:none}} .pil .num{width:56px;height:56px;margin:0 0 20px;display:flex;align-items:center;justify-content:center; font-family:var(--f-title);font-size:34px;color:var(--camel)} .pil h3{font-size:20px;margin-bottom:10px} .pil p{font-size:14px;color:var(--gris);max-width:30ch;margin:0} @media(max-width:720px){.trio{grid-template-columns:1fr;gap:44px}} /* ---------- GAMMES / cartes photo ---------- */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);max-width:1040px;margin:0 auto} .gam{text-align:left} .gam .cover{aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-bottom:22px;background:var(--fond)} .gam .cover img{width:100%;height:100%;object-fit:cover} .gam .cover.tint{background:radial-gradient(62% 62% at 50% 45%, var(--halo) 0%, var(--fond) 82%);display:flex;align-items:center;justify-content:center} .gam .cover.tint img{width:88%;height:88%;object-fit:contain} .gam .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--camel);display:block;margin-bottom:8px} .gam h3{font-size:23px;margin-bottom:8px} .gam p{font-size:14px;color:var(--gris);max-width:36ch;margin:0} @media(max-width:620px){.g2{grid-template-columns:1fr;gap:44px}} /* Nuancier packshots (coloris produit) : 4 de front, 2 sur petit écran. En 4 colonnes figées, les packshots tombaient à 62px de large sur mobile. */ .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,26px);max-width:1040px;margin:0 auto} .g4 h3{font-size:18px} @media(max-width:720px){.g4{grid-template-columns:repeat(2,1fr);gap:clamp(24px,5vw,32px)}} /* ---------- CORORIS (nuancier produit) ---------- */ .coloris{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px} .coloris .sw{text-align:center} .coloris .dot{width:56px;height:56px;border-radius:50%;border:1px solid var(--ligne);margin:0 auto 8px} .coloris small{font-size:12px;color:var(--gris)} /* ---------- TAILLES ---------- */ .size h3{font-family:var(--f-title);font-size:clamp(30px,4.4vw,42px);color:var(--camel)} .size .nm{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:8px 0 10px} .size p{font-size:13.5px;color:var(--gris);max-width:26ch;margin:0} /* ---------- VERSIONS ---------- */ .ver .verimg{aspect-ratio:16/10;border-radius:16px;margin-bottom:20px;display:flex;align-items:center;justify-content:center; background:radial-gradient(64% 64% at 50% 42%, var(--halo) 0%, var(--fond) 82%)} .ver .verimg img{width:86%;height:86%;object-fit:contain} .ver h3{font-size:22px;margin-bottom:4px} .ver .tag{font-size:12px;color:var(--camel);letter-spacing:.04em;margin-bottom:12px;display:block} .ver p{font-size:13.5px;color:var(--gris);margin:0;max-width:30ch} .ver ul{list-style:none;margin:12px 0 0;padding:0;display:inline-block;text-align:left} .ver li{font-size:13px;color:var(--gris);padding-left:16px;position:relative;margin-bottom:5px} .ver li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--camel)} /* ---------- SPECS ---------- */ .tailles{background:var(--fond)} .preuve{text-align:left} /* Aligné au bord comme le titre qui le surmonte : centré, il reproduisait le décalage corrigé sur .trio le 16/08. */ .specs-in{max-width:760px;margin:0} .specs-in .row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--ligne)} .specs-in .row:last-child{border-bottom:0} .specs-in dt{font-size:13px;letter-spacing:.02em;color:var(--gris)} .specs-in dd{font-family:var(--f-title);font-size:17px;text-align:right;font-variant-numeric:tabular-nums} /* ---------- PREUVE (jauge) ---------- */ .gauge{max-width:640px;margin:0;text-align:left} .gauge .g{margin-bottom:22px} .gauge .head{display:flex;justify-content:space-between;font-size:13px;color:var(--gris);margin-bottom:8px} .gauge .head b{font-family:var(--f-title);font-weight:600;color:var(--noir);font-size:16px} .track{height:12px;border-radius:12px;background:var(--ligne);overflow:hidden} .track>i{display:block;height:100%;border-radius:12px} .note{font-size:12px;color:var(--gris);margin-top:26px;text-align:left} /* ---------- GALERIE (réalisations) ---------- */ .gallery{columns:3;column-gap:18px;max-width:1160px;margin:0 auto} .gallery figure{break-inside:avoid;margin-bottom:18px;border-radius:16px;overflow:hidden;position:relative} .gallery img{width:100%;height:auto;display:block} .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-size:13px; background:linear-gradient(transparent, rgba(20,18,16,.72));font-family:var(--f-title)} @media(max-width:900px){.gallery{columns:2}} @media(max-width:560px){.gallery{columns:1}} /* ---------- TÉMOIGNAGES ---------- La DA vient de la landing, d'où ces règles ont migré le 17/08 : colonnes séparées par un filet, guillemet camel en filigrane, citation en Fraunces. Elles servent l'accueil et /realisations — c'est ce qui les met ici plutôt que dans accueil.css. `--terra` y est devenu `--camel` : même valeur, mais seul `--camel` existe hors de l'accueil. */ /* Marquee continu (retour client 09/09) : même ressort que le bandeau logos plus haut (`.defile`/`.piste`) plutôt qu'un carrousel à défilement discret — piste dupliquée une fois dans le HTML (deuxième passage `aria-hidden`), translateX en boucle sur -50%, fondu aux deux bords, pause au survol. `.tm-track` porte le masque/overflow, `.tm-grid` est la piste animée : les deux sont séparés (comme `.defile`/`.piste`) pour que `.tm-note`, hors de la piste, ne soit ni masquée ni dupliquée. */ .tm-track{overflow:hidden;margin-top:clamp(28px,4vw,48px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .tm-grid{display:flex;gap:0;width:max-content; animation:tm-glisse 90s linear infinite;will-change:transform} @keyframes tm-glisse{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media(hover:hover) and (pointer:fine){.tm-track:hover .tm-grid{animation-play-state:paused}} @media(prefers-reduced-motion:reduce){ .tm-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none} .tm-grid{animation:none;width:auto}} /* Un seul témoignage : la citation garde sa mesure au lieu de tenir dans un tiers de grille et de laisser deux colonnes vides (pas de piste dupliquée dans ce cas — rien à faire défiler). */ .tm-grid.solo{animation:none;width:auto} .tm-grid.solo .tm{flex:0 0 min(100%,760px)} /* Largeur de carte fixe : la piste vaut `width:max-content`, une largeur en `%` s'y résoudrait contre une base indéfinie. */ .tm{position:relative;background:none;border:0;border-radius:0; flex:0 0 clamp(280px,30vw,380px); padding:clamp(26px,2.4vw,34px) clamp(22px,2vw,30px) 0 0;display:flex;flex-direction:column} .tm+.tm{border-left:1px solid var(--ligne);padding-left:clamp(22px,2vw,30px)} .tm::before{content:"\201C";position:absolute;top:0;left:0;font-family:var(--serif);font-size:66px;line-height:1;color:var(--camel);opacity:.28} .tm+.tm::before{left:clamp(22px,2vw,30px)} .tm blockquote{margin:42px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--noir);flex:1} .tm .who{display:flex;align-items:center;gap:12px;margin-top:22px} .tm .ph-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto; background:linear-gradient(135deg,rgba(181,103,62,.18),rgba(216,238,255,.5)); border:1px dashed rgba(181,103,62,.4); /* Le cercle reste le placeholder « photo à fournir » de la landing, mais il porte les initiales quand on en a : un témoignage nommé ne doit pas s'afficher plus pauvrement qu'un exemple de mise en page. */ display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:600;color:var(--camel-fonce)} .tm .who b{display:block;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--camel)} .tm .who span{display:block;font-size:12.5px;color:var(--gris)} .tm-note{margin-top:20px;font-size:12.5px;color:var(--gris)} /* ---------- BLOG (actualités) ---------- */ /* Grille de cartes (3 colonnes) — même principe que la maquette validée pour la page actualités : vignette (photo à fournir par le client, placeholder `--ciel` en attendant), catégorie + date, titre, résumé, lien. */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,36px)} .post{display:flex;flex-direction:column;border:1px solid var(--ligne);border-radius:16px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease} .post-vignette{display:block;aspect-ratio:16/10;background:var(--ciel);overflow:hidden} .actualites-posts .post-vignette{position:relative} .actualites-posts .post-vignette::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,transparent 64%,rgba(255,255,255,.28) 78%,rgba(255,255,255,.72) 90%,#fff 100%)} @media(hover:hover) and (pointer:fine){ .post:hover{transform:translateY(-8px);box-shadow:0 26px 48px -24px rgba(38,38,42,.4)} } .post-meta{display:flex;align-items:center;gap:10px;padding:20px 20px 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase} .post-meta .post-cat{color:var(--camel);font-weight:600} .post-meta time{color:var(--gris)} .post h3{font-size:clamp(18px,2vw,21px);line-height:1.25;margin:10px 20px 0} .post p{font-size:14px;color:var(--gris);margin:10px 20px 0} /* Pas de `.lk` ici : sa ligne camel sous le lien ne convient pas au pied de carte — le lift au survol suffit à signaler l'interactivité. */ .post .lk{margin:14px 20px 20px;font-size:14px;font-weight:600;color:var(--bleu);border-bottom:0;padding-bottom:0} @media(max-width:900px){.posts{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.posts{grid-template-columns:1fr}} /* ---------- FORMULAIRE (étude/contact) ---------- */ /* La grille de contact est celle de l'accueil (17/08) : deux colonnes égales sur toute la trame. La page interne avait la sienne — .85fr/1.15fr centrées sur 1040px — et son fond teinté : le formulaire y arrivait plus étroit et décalé par rapport à la landing, pour une section qui dit la même chose. L'ancienne `.ct` d'accueil.css a fusionné ici. */ .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start} .contact-full{grid-template-columns:1fr} /* Scopé à `.side` : sur l'accueil, le titre de la colonne de gauche a sa propre échelle (attribut style) et n'a pas à hériter des marges de la page interne. */ .contact .side h2{font-size:clamp(30px,4.6vw,44px);line-height:1.05;margin:14px 0 20px} .contact .side p{color:var(--gris);margin-bottom:18px;max-width:36ch} .contact .side a{border-bottom:1px solid var(--camel);font-size:14px} .adresse{color:var(--gris);font-size:13px} @media(max-width:820px){.contact{grid-template-columns:1fr}} /* ---------- Le formulaire de contact — accueil ET /etude-acoustique (17/08) ---------- Il vivait dans `accueil.css` ; il sert deux pages, donc il descend ici, pour la raison qui a fait descendre les témoignages `.tm` le même jour : une DA ne se duplique pas. `--terra`/`--terra-txt` y sont devenus `--camel` (même valeur) — seul `--camel` existe hors de l'accueil. ⚠️ Tout est scopé sous `.form-contact`. Sur l'accueil, ces règles portaient les sélecteurs nus `form{}` et `button{}` : sans portée ici, elles auraient repeint tout `