/* ================================================================
LOUKS — feuille de style du site
Les valeurs ci-dessous sont celles retenues pour ce site :
conteneur 1260, nav locale 72, sections 160/216, titres 56/600/60,
corps 17/25/-0.37, boutons rayon 120, transitions .24s.
Les textes, images et couleurs de marque sont ceux de Louks.
================================================================ */
:root{
--contenu:1260px;
--ink:#1D1D1F; --gris:#6E6E73; --clair:#F5F5F7; --noir:#000000;
--sombre:#1D1D1F;
/* Aucun bleu : la palette se limite au noir, au creme et au gris.
Les appels a l'action se font au lisere, pas a la couleur. */
--gris-f:#6E6E73;
--f:"Poppins",system-ui,"Segoe UI",sans-serif;
--e:cubic-bezier(.4,0,.6,1);
--bord:22px;
}
@media (min-width:735px){ :root{--bord:24px} }
@media (min-width:1069px){ :root{--bord:0px} }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:#fff;color:var(--ink);font-family:var(--f);font-weight:400;
font-size:17px;line-height:25px;letter-spacing:-.37px;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.w{max-width:var(--contenu);margin:0 auto;padding:0 var(--bord)}
/* --- les rôles typographiques, aux valeurs relevées ------------- */
.t56{font-size:56px;line-height:60px;letter-spacing:-.28px;font-weight:600}
.t48{font-size:48px;line-height:52px;letter-spacing:-.14px;font-weight:600}
.t34{font-size:34px;line-height:40px;letter-spacing:-.37px;font-weight:600}
.t28{font-size:28px;line-height:32px;letter-spacing:.2px;font-weight:600}
.t24{font-size:24px;line-height:28px;letter-spacing:.22px;font-weight:600}
.t21{font-size:21px;line-height:25px;letter-spacing:.23px;font-weight:600}
.t19{font-size:19px;line-height:27px;letter-spacing:.23px;font-weight:400}
.t17{font-size:17px;line-height:25px;letter-spacing:-.37px;font-weight:400}
.t12{font-size:12px;line-height:16px;letter-spacing:-.12px;font-weight:400}
.gris{color:var(--gris)}
@media (max-width:734px){
.t56{font-size:40px;line-height:44px}
.t48{font-size:36px;line-height:40px}
.t34{font-size:28px;line-height:32px}
.t28{font-size:21px;line-height:25px}
}
/* --- 1 · le bandeau (52 px) ------------------------------------- */
/* --- 2 · la nav locale — barre arrondie sombre, flottante ------
Ce n'est pas un bandeau pleine largeur : c'est une pilule posée sur
la page, avec le nom à gauche et les actions à droite. ---------- */
/* Fixe, et non collante : une nav collante reserve sa hauteur des le
depart et ouvre un bandeau blanc au-dessus du heros. */
/* La barre est VISIBLE par defaut. Elle porte le nom du site, qui est
le seul retour vers l'accueil depuis le formulaire, les remerciements
et les pages legales — et aucune de ces pages ne charge de script.
Une barre qui attendrait du JavaScript pour apparaitre y resterait
invisible pour toujours.
Seules les deux pages d'accueil la retardent, avec `loc--differee` :
leur ouverture affiche deja « Louks » en grand, on ne veut pas le
lire deux fois l'un sous l'autre. */
.loc{position:fixed;top:0;left:0;right:0;z-index:9998;
padding:12px var(--bord) 0;max-width:var(--contenu);margin:0 auto;
transition:opacity .3s var(--e),transform .3s var(--e)}
.loc--differee{opacity:0;transform:translateY(-16px);pointer-events:none}
.loc--differee.vu{opacity:1;transform:none;pointer-events:auto}
.loc__w{height:56px;border-radius:120px;padding:0 12px 0 24px;
background:rgba(22,22,22,.72);backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
display:flex;align-items:center;gap:24px;color:var(--clair)}
.loc__nom{font-size:17px;line-height:25px;letter-spacing:-.37px;font-weight:600;
margin-right:auto;display:flex;align-items:center;height:56px;color:var(--clair)}
/* `overflow:visible` : le trace du nom touche exactement le bord bas de
son cadre (32,92 pour un cadre de 32,919), et un SVG coupe par defaut
ce qui depasse. A 17 px de haut, une unite du cadre vaut un demi-pixel
— la rangee adoucie sous le pied des lettres se faisait donc raser, et
la base du mot paraissait coupee. */
.loc__nom svg{width:58px;height:auto;overflow:visible}
/* A droite de la barre : la langue, puis l'adresse. Le groupe porte le
margin-left:auto, plus l'adresse toute seule — sinon les deux marges
automatiques se disputent l'espace et le lien de langue se colle au
logo. */
.loc__droite{margin-left:auto;display:flex;align-items:center;gap:14px}
.loc__contact{font-size:12px;line-height:16px;letter-spacing:-.12px;
color:rgba(245,245,247,.78);display:flex;align-items:center;height:44px;
transition:color .24s var(--e)}
.loc__contact:hover{color:var(--clair)}
/* Un filet vertical plutot qu'un point median : il separe sans ajouter
un caractere de plus dans une barre qui en compte deja peu. */
/* min-width 44 : le mot « EN » ne mesure que 17 px de large. Sans
minimum, la zone touchable tombait a 31 px, sous le seuil ou un
pouce vise juste. Le texte reste centre, seule la cible grandit. */
.loc__lang{font-size:12px;line-height:16px;letter-spacing:.06em;
color:rgba(245,245,247,.62);display:flex;align-items:center;
justify-content:center;height:44px;min-width:44px;box-sizing:content-box;
padding-right:14px;border-right:1px solid rgba(245,245,247,.22);
transition:color .24s var(--e)}
.loc__lang:hover{color:var(--clair)}
/* Un mot, pas un bouton. Meme taille et meme graisse que le reste de la
barre : il ne se distingue que par sa pleine lisibilite, la ou l'adresse
reste en retrait. Rien a remplir, rien a acheter — on lit « Rejoindre »
comme on lit « EN ». */
.loc__agir{font-size:12px;line-height:16px;letter-spacing:-.12px;
color:var(--clair);display:flex;align-items:center;height:44px;
padding-left:14px;border-left:1px solid rgba(245,245,247,.22);
transition:opacity .24s var(--e)}
.loc__agir:hover{opacity:.72}
.loc__liens{display:flex;gap:20px;list-style:none}
.loc__liens a{font-size:12px;line-height:16px;letter-spacing:-.12px;color:rgba(245,245,247,.82);
display:flex;align-items:center;height:44px;transition:color .24s var(--e)}
.loc__liens a:hover,.loc__liens a[aria-current]{color:var(--clair)}
.btn{display:inline-flex;align-items:center;justify-content:center;
background:transparent;color:var(--clair);border:1px solid currentColor;
cursor:pointer;font-family:var(--f);
font-size:14px;line-height:18px;letter-spacing:-.15px;font-weight:400;
padding:11px 22px;border-radius:120px;min-height:44px;white-space:nowrap;
transition:background .28s var(--e),color .28s var(--e)}
.btn:hover{background:var(--clair);color:var(--noir)}
.sec--pale .btn{color:var(--ink)}
.sec--pale .btn:hover{background:var(--ink);color:var(--clair)}
@media (max-width:833px){
.loc__liens{display:none}
/* Vingt-deux signes d'adresse ne tiennent pas a cote d'un mot de plus.
C'est l'adresse qui part : le pied de page la redonne deux fois. */
.loc__contact{display:none}
.loc__agir{padding-left:0;border-left:0}
}
/* --- 3 · l'ouverture — pilotee par le scroll --------------------
La section est haute ; son contenu colle a l'ecran. En descendant,
le titre s'efface pendant que l'objet grandit et remonte. Une seule
chose progresse : la distance. --------------------------------- */
.ouvre{position:relative;height:200svh;background:#0B0B0C;color:var(--ink)}
.ouvre__fixe{position:sticky;top:0;height:100svh;overflow:hidden}
.ouvre__fond{position:absolute;inset:0;z-index:0;display:block;
will-change:transform;transform-origin:46% 60%}
.ouvre__fond img{width:100%;height:100%;object-fit:cover;display:block}
/* La canette occupe 42 a 61 % de la largeur : le tiers droit est libre.
Mesure de cette zone : sombre sur les 17 premiers pour cent (42 a 70
de luminance), claire de 33 a 92 % (172 a 222). Le texte se pose donc
dans la partie claire, en encre, et d'un seul bloc — plus besoin de
jongler entre creme en haut et encre en bas. */
/* On centre avec `translate` et non `transform` : le script ecrit
`transform` pendant le scroll, les deux se composent au lieu de
s'ecraser. */
.ouvre__dire{position:absolute;z-index:2;right:0;top:50%;translate:0 -50%;
width:min(38vw,470px);padding-right:max(var(--bord),calc((100vw - var(--contenu))/2));
color:var(--ink);will-change:opacity,transform}
.ouvre__mot{width:min(28vw,300px);color:var(--ink)}
.ouvre__mot h1{margin:0;line-height:0}
.ouvre__sig{width:min(30vw,304px);margin:18px 0 0;color:var(--ink);opacity:.78}
/* Discrete mais lisible : a 0,62 elle passait sous le seuil de confort
sur le fond clair. */
.ouvre__mention{margin-top:26px;color:var(--ink);opacity:.82}
@media (max-width:833px){
/* Photo verticale dediee, 1290x2786. Elle n'est plus un decoupage du
master paysage mais une prise de vue au format de l'ecran, avec la
canette a 41 % de la hauteur, 31 % de ciel au-dessus et 28 % de sol
en dessous.
Ce que ca change, mesure : 3,44 pixels de source par pixel d'ecran
au lieu de 1,51 au depart. Et surtout deux vraies zones de pose —
le ciel plafonne a 74 de luminance, le sol ne descend pas sous 156.
L'encre sur le sol donne un contraste de 5,9 pour 1.
Le titre, lui, ne se pose pas sur la photo : l'etiquette de la
canette dit deja « Louks » et la phrase, en grand, sur le meme
ecran. Il ne sert que sur le noir d'ouverture, puis il s'efface. */
.ouvre{height:200lvh;background:#0B0B0C}
.ouvre__fixe{display:block;height:100lvh;background:#0B0B0C}
.ouvre__fond{position:absolute;inset:0;width:auto;aspect-ratio:auto;
overflow:hidden;opacity:0;will-change:opacity}
.ouvre__fond img{will-change:transform}
/* Le bloc occupe tout le cadre au lieu d'etre un pave centre : le nom
et la signature se centrent dedans, et la mention se detache en bas
sur le sol. Sans ca, `bottom` la placerait par rapport au pave de
texte et non par rapport a l'ecran. */
.ouvre__dire{position:absolute;inset:0;translate:none;width:auto;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 var(--bord);text-align:center;color:var(--clair)}
.ouvre__mot{width:min(46vw,175px);margin:0 auto;color:inherit;
animation:paraitre 1200ms var(--e) backwards}
.ouvre__sig{display:block;width:min(52vw,200px);margin:12px auto 0;color:inherit;opacity:1;
animation:paraitre 1200ms var(--e) 280ms backwards}
/* La mention reste, elle. Ce n'est pas un doublon : l'etiquette dit
« natural mineral water » en anglais, celle-ci est en francais, et
c'est une ligne de description, pas une signature. Elle se pose sur
le sol, en encre, la ou le contraste est mesure a 5,9 pour 1. */
.ouvre__mention{display:block;position:absolute;left:var(--bord);right:var(--bord);
bottom:44px;margin:0;color:var(--ink);opacity:0}
.ouvre__mot svg,.ouvre__sig svg{display:block;width:100%;height:auto}
}
/* L'arrivee sur l'ecran noir. `backwards` et non `both` : l'animation
ne tient l'element qu'AVANT son depart. Avec `both` elle garderait la
main sur l'opacite jusqu'a la fin des temps et le script ne pourrait
plus faire disparaitre la signature — une animation l'emporte sur un
style en ligne. */
@keyframes paraitre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* --- le filet de l'ouverture ---------------------------------------
Pas un mot, pas une fleche : une ligne qui respire. C'est deja le
vocabulaire du panneau des courbes, en vertical.
Elle occupe le bas de l'ecran noir juste le temps de l'ouverture,
puis elle cede la place a la mention — qui arrive exactement la,
avec la photo. La ligne s'en va, les mots s'installent.
L'animation ne touche QUE la hauteur. Jamais l'opacite : celle-la
appartient au script, et une animation CSS l'emporterait sur lui.
Les deux ne se disputent donc aucune propriete. */
.ouvre__filet{display:none}
@media (max-width:833px){
.ouvre__filet{display:block;position:absolute;left:50%;bottom:44px;
width:1px;height:38px;margin-left:-.5px;background:currentColor;
transform-origin:50% 0;opacity:.72;
animation:filer 3.2s var(--e) infinite}
}
@keyframes filer{0%,100%{transform:scaleY(.26)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){ .ouvre__filet{animation:none} }
@media (prefers-reduced-motion:reduce){
.ouvre{height:100svh}
.ouvre__mot,.ouvre__sig{animation:none}
}
/* --- 4 · les sections (160 / 216) ------------------------------- */
.sec{padding-top:160px;padding-bottom:216px}
.sec--eg{padding-bottom:160px}
.sec--court{padding-top:114px;padding-bottom:160px}
.sec--noir{background:var(--noir);color:var(--clair)}
.sec--gris{background:var(--sombre);color:var(--clair)}
.sec--pale{background:var(--clair);color:var(--ink)}
/* Le rythme vertical du site est large : 160 px avant une section,
216 apres. Sur un ecran de 1440 c'est une respiration ; sur un
telephone de 812 de haut, les deux marges s'additionnent et laissent
376 px de vide entre le dernier mot d'une section et le titre de la
suivante — pres de la moitie de l'ecran, en noir. On rapproche.
Le texte courant, lui, etait regle comme un titre : 21 px sur 25 px
d'interligne, soit 1,19. A 331 px de colonne cela donne 28 signes par
ligne en gras, c'est-a-dire un pave. On descend le corps pour gagner
des signes et on ouvre l'interligne pour gagner de l'air. */
@media (max-width:833px){
.sec{padding-top:80px;padding-bottom:104px}
.sec--eg{padding-bottom:80px}
.sec--court{padding-top:64px;padding-bottom:80px}
.t21{font-size:18px;line-height:27px}
.t19{font-size:17px;line-height:26px}
}
.sec--noir .gris,.sec--gris .gris{color:#A1A1A6}
.sec--noir a,.sec--gris a{color:inherit}
.sec .t56{max-width:16ch}
/* Quand le titre porte deja ses propres retours a la ligne, la largeur
maximale n'a plus de sens : elle le casserait une seconde fois. */
.sec .t56--libre{max-width:none}
/* Le titre des lieux porte deja ses retours a la ligne : une largeur
maximale le casserait une seconde fois. */
.sec .t--lieux{max-width:none}
.sec__intro{max-width:660px;margin-top:20px}
/* --- 5 · le rail de tuiles (« Get the highlights ») ------------- */
/* la première tuile s'aligne sur le titre ; le rail ne déborde qu'à droite */
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
padding-top:44px;padding-bottom:20px;scrollbar-width:none;
/* Meme marge des deux cotes, calee sur le bord du titre : sinon la
derniere tuile vient coller le bord droit de la fenetre. */
padding-left:max(var(--bord), calc((100vw - var(--contenu)) / 2));
padding-right:max(var(--bord), calc((100vw - var(--contenu)) / 2))}
.rail::-webkit-scrollbar{display:none}
.tuile{flex:0 0 300px;height:480px;scroll-snap-align:center;border-radius:28px;
overflow:hidden;position:relative;background:var(--sombre)}
.tuile img{width:100%;height:100%;object-fit:cover}
/* Voile sombre en pied de tuile : les photos claires rendaient
la legende blanche illisible. */
.tuile::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;
background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.5) 38%,transparent);
pointer-events:none}
.tuile p{position:absolute;z-index:1;left:24px;right:24px;bottom:24px;font-size:21px;
line-height:25px;letter-spacing:.23px;font-weight:600;color:#F5F5F7;
text-shadow:0 1px 24px rgba(0,0,0,.6)}
.rail__cmd[hidden]{display:none}
.rond[disabled]{opacity:.32;cursor:default}
.rail__cmd{display:flex;justify-content:flex-end;gap:12px;
max-width:var(--contenu);margin:0 auto;padding:0 var(--bord)}
.rond{width:36px;height:36px;flex:0 0 36px;border-radius:120px;border:0;cursor:pointer;
background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;
display:flex;align-items:center;justify-content:center;
transition:background .24s var(--e)}
.rond:hover{background:rgba(255,255,255,.28)}
/* --- 2 · le creatif ---------------------------------------------
Meme panneau plein ecran que les autres, avec une video au lieu
d'une photo. La phrase est au serif : c'est une phrase d'auteur,
pas un titre produit. */
/* Poppins, comme tout le reste de la page, et non un serif. Le
lettrage Louks pose juste dessous est deja un serif a fort contraste :
deux serifs voisins mais differents se lisent comme une erreur de
police, pas comme une intention. Un sans au-dessus d'un serif, en
revanche, fait du lettrage le seul element qui accroche l'oeil — ce
qu'on attend d'une signature. Le heros marie deja ces deux-la. */
.phrase{font-family:var(--f);
font-weight:400;font-size:clamp(34px,4.4vw,64px);line-height:1.16;
letter-spacing:-.01em;color:var(--clair);max-width:20ch}
.signe{margin-top:22px;font-family:var(--f);font-weight:400;
font-size:clamp(13px,1.15vw,16px);line-height:1.5;letter-spacing:.06em;
text-transform:uppercase;color:var(--clair);opacity:.8;max-width:32ch}
/* --- les grandes sections : un sujet, un visuel plein ecran ------
Le visuel occupe tout le cadre, le texte ponctue en bas. Un voile
sombre monte du bas : sans lui le texte creme tomberait sur des
zones claires de la photo. */
.grand{position:relative;min-height:100svh;display:flex;align-items:flex-end;
overflow:hidden;background:var(--noir);color:var(--clair)}
.grand__fond{position:absolute;inset:0;z-index:0;margin:0}
.grand__fond img,.grand__fond video{width:100%;height:100%;object-fit:cover;display:block}
.grand::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 20%,
rgba(0,0,0,.24) 44%,transparent 68%)}
.grand__dire{position:relative;z-index:2;width:100%;max-width:var(--contenu);
margin:0 auto;padding:0 var(--bord) 104px}
.grand__dire .t56{max-width:20ch}
.grand__dire .phrase{max-width:18ch;margin:0}
/* --- panneau 2 : une phrase longue -------------------------------
Dix-huit mots ne se composent pas comme six. En tres gros corps une
phrase longue cesse d'etre une phrase : elle devient un paragraphe
pose sur la photo. On descend donc le corps et on ouvre la largeur,
et on coupe la ligne sur le pivot — « mais » commence la seconde. */
/* Largeur bridee a dessein. Etale sur toute la largeur, la phrase
formait une BANDE horizontale qui coupait la piece en deux — et elle
se couchait parallelement aux horizontales de la photo (le bord du
tapis, la ligne du bureau) en tombant sur sa zone la plus chargee.
Resserree, elle devient un bloc pose dans l'angle : sur une
photographie, un bloc haut et etroit tient mieux qu'un bloc large
et court. */
/* 38ch : la deuxieme proposition en fait trente-huit et doit tenir sur
une ligne, sinon l'enchainement « heures / des heures » se perd dans
un repli. La chute garde sa ligne a elle. */
.creatif .phrase{font-weight:500;font-size:clamp(22px,2.6vw,40px);
line-height:1.36;letter-spacing:-.005em;max-width:38ch;
/* Pas de `text-wrap:balance` ici : en egalisant les longueurs, il
coupait « ne nait / pas de ce qui se voit » — une negation scindee
en deux lignes. La largeur est calee pour que chaque proposition
tienne sur UNE ligne, et le pose le pivot « mais » en tete de
la seconde. */
text-wrap:pretty}
/* La chute. Elle ne dit plus la meme chose que les deux premieres —
celles-la parlent des heures de travail, celle-ci du produit. Une
ligne de blanc les separe : sans elle les trois phrases forment un
pave, et l'oeil ne sait pas ou respirer. */
.chute{display:block;margin-top:.62em}
/* La marque sous la phrase, dans le lettrage Louks et non dans une
police de texte. Detachee : c'est une signature, pas une ligne de
plus. La largeur est calee sur la hauteur de casse de la phrase. */
.phrase__marque{margin:44px 0 0;width:clamp(96px,10vw,140px);color:var(--clair)}
.phrase__marque svg{width:100%;height:auto;display:block}
/* La legende part dans le coin oppose au texte : celui-ci est en bas a
gauche, elle va en bas a droite. Meme colonne de 1260 px que le reste
de la page, et surtout MEME LIGNE DE PIED — 104 px comme le bloc de
texte, donc les deux coins se posent sur la meme base.
En haut a droite elle etait moins lisible : le voile de ce panneau ne
monte que du bas, et la photo y atteint 235 de luminance. Ici elle est
dans la partie la plus sombre du cadre. */
.legende--coin{position:absolute;z-index:2;bottom:104px;left:50%;
transform:translateX(-50%);width:100%;max-width:var(--contenu);
padding:0 var(--bord);margin:0;text-align:right;color:rgba(245,245,247,.75)}
/* Sur telephone le bloc de texte et la legende etaient cales a la meme
hauteur : le logo a gauche et la legende a droite se retrouvaient sur
la meme ligne, a 35 px l'un de l'autre. On remonte le bloc pour que
la legende passe dessous. */
@media (max-width:833px){ .legende--coin{bottom:56px} }
/* Le mouvement de camera.
Il n'est plus fait en CSS. L'ancienne version faisait tourner une
photo fixe sur une trajectoire fermee ; ici c'est une vraie prise de
vue, et la camera avance d'elle-meme.
Une video qui boucle coupe net a la derniere image : un travelling
avant qui repart brutalement en arriere. On monte donc le fichier en
ALLER-RETOUR — les 240 images a l'endroit, puis les 238 du milieu a
l'envers. La derniere image du fichier est la voisine de la
premiere, donc la boucle ne se voit pas. 20 s, jamais de raccord.
Aucune animation CSS par-dessus : deux mouvements superposes, c'est
un mouvement de trop. */
.film{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:56% 50%;display:block;background:transparent}
/* La meme image en fond du cadre, cadree pareil. Elle tient la place
pendant que les 5 Mo arrivent, et elle reste la si la lecture est
refusee — la page n'a alors qu'un plan fixe au lieu d'un trou noir. */
.creatif .grand__fond{background:#000 url(../assets/creatif-poster.jpg) 56% 50%/cover no-repeat}
/* Le vignettage. La photo est eclairee d'un bord a l'autre, donc les
livres du mur de droite crient aussi fort que la table a dessin.
On assombrit la peripherie : c'est le drapeau du chef operateur. */
/* Le voile general monte du bas et ne vaut plus que 24 % a mi-hauteur.
Le texte fait trois lignes maintenant : sa premiere ligne tombe
justement la, sur les papiers blancs de la table a dessin. On ajoute
donc un second voile, lateral celui-la, du cote ou le texte est
aligne. L'homme se tient a 56 % : il reste en dehors. */
.creatif::after{background:
linear-gradient(to right,rgba(0,0,0,.74) 0%,rgba(0,0,0,.44) 32%,
rgba(0,0,0,.10) 52%,transparent 64%),
linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 20%,
rgba(0,0,0,.24) 44%,transparent 68%)}
.creatif .grand__fond::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 82% 82% at 56% 52%,
rgba(0,0,0,0) 40%, rgba(0,0,0,.26) 76%, rgba(0,0,0,.58) 100%)}
/* La section des courbes n'a pas de photo de fond : la canette y est
manipulable. Elle se tient d'un cote de l'ecran, le texte de l'autre —
centree, elle prenait toute la place et coupait la lecture. */
.grand--noir{align-items:center;padding:112px 0}
.grand--noir::after{display:none}
.grand__duo{position:relative;z-index:2;display:grid;
grid-template-columns:1fr 1fr;gap:48px;align-items:center;
width:100%;max-width:var(--contenu);margin:0 auto;padding:0 var(--bord)}
.grand--noir .grand__dire{padding:0;max-width:none}
.grand__objet{display:flex;justify-content:center}
@media (max-width:833px){
.grand{min-height:88svh}
/* 88 et non 64 : sur mobile la barre d’outils du navigateur recouvre le
bas de l'ecran, et la marque posee sous la phrase se retrouvait
dessous. On lui laisse de quoi passer au-dessus. */
.grand__dire{padding-bottom:88px}
/* Les cesures de ces trois titres sont posees pour la largeur du
bureau. Sur une colonne de 331 px elles laissent des mots seuls en
bout de ligne — « semi-mate, », « dépose. », « brut, ». On les
neutralise et on laisse l'equilibrage repartir le texte lui-meme.
L'espace ajoutee avant chaque dans le HTML sert a ca : sans
elle, masquer la balise collerait les mots entre eux. */
#courbes h2 br,#lettrage h2 br{display:none}
/* Sauf le panneau mat : ses deux phrases sont deux phrases, pas une
seule coupee. En les laissant couler, « Le » se retrouvait seul en
bout de ligne, separe du froid qu'il annonce. Le retour a la ligne
tient donc aussi sur telephone. */
#mat h2 br{display:inline}
#courbes h2,#lettrage h2,#mat h2{font-size:30px;line-height:34px;text-wrap:balance}
.grand--noir{padding:80px 0}
/* Sur telephone l'ordre devient : indication, canette, titre. Le bloc
de texte n'a qu'une place dans la grille, donc l'indication ne peut
pas passer devant la canette tant qu'elle y est enfermee.
`display:contents` fait disparaitre le bloc en tant que boite : le
titre et l'indication deviennent eux-memes des elements de la
grille, et `order` les range. L'ecart de la grille passe a zero, les
marges propres suffisent. */
.grand__duo{grid-template-columns:1fr;gap:0}
#courbes .grand__dire{display:contents}
/* Centree : au bureau elle est alignee sur le titre, ici elle coiffe
la canette, qui est centree. */
#courbes .poig{order:-2;margin:0 0 26px;justify-content:center}
.grand__objet{order:-1;margin-bottom:40px}
}
/* --- 6 · la visionneuse (le seul moment que l'on manipule) ------ */
/* Le cadre suit exactement le recadrage des images (473 x 787 pris
dans la video), donc rien n'est rogne deux fois.
La hauteur du cadre est plafonnee a 590 px : c'est donc la HAUTEUR du
recadrage, et elle seule, qui decide de la taille de la canette a
La canette est entiere dans le recadrage, du couvercle a la base :
on ne rogne pas l'objet pour le grossir, on agrandit le CADRE.
Le facteur d'agrandissement vaut alors hauteur / 393,5 :
590 px -> 1,50x 690 px -> 1,75x 790 px -> 2,01x
On reste a 590. La source ne contient que 724 px de canette : au-dela
de ~740 px de cadre on depasse 1,9x et l'image mollit. Pour agrandir
nettement il faudrait regenerer la video en 1080p, pas toucher au
CSS. */
.scene{position:relative;margin:0 auto;height:min(56svh,590px);
/* 397/757 et non 473/787 : les images sont desormais recadrees au
plus juste sur la canette. Elles portaient 38 px de noir de chaque
cote et 30 en haut — du vide qui prenait de la place dans le cadre
et rapetissait la canette d autant. */
aspect-ratio:397/757;max-width:100%;
cursor:ew-resize;touch-action:pan-y;user-select:none;background:#000}
/* Les images montrent la canette entiere, du couvercle a la base, sur
fond noir. Le reflet de la surface est hors cadre. */
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;will-change:opacity;display:block;
/* Le fond des images a ete ramene au noir pur (toute valeur sous 10 de
luminance est mise a zero) : il se confond donc exactement avec le
noir de la section, et aucun rectangle n'apparait sur les bords.
C'est aussi ce qui supprime le gresillement pendant le scrub : le
bruit JPEG des zones sombres changeait d'une image a l'autre, une
fois a zero il ne change plus.
Plus aucun masque : le recadrage serre a supprime le reflet, et le
fond etant au noir exact de la section il n'y a plus de bord a
fondre. La canette descend jusqu'a 96 % du cadre — un voile en bas
viendrait maintenant manger sa base. */}
/* Pas de regle mobile : a 590 px de plafond, la largeur du cadre
(590 x 0,601 = 355 px au maximum) tient deja entre les marges d'un
telephone. L'ancienne regle mobile etait de toute facon morte —
ecrite AVANT celle du dessus, elle perdait a specificite egale. */
/* Les images ont un fond noir, comme la section : pas de cadre, pas
d'arrondi — la canette est simplement posee sur le noir. */
/* `balance` a raison ici, la ou il avait tort sur le panneau 2.
La colonne fait 606 px pour un corps de 56 : vingt et un signes par
ligne. Sans lui, les deux phrases laissent leur verbe seul en bout —
« Un relief que l'oeil / devine. » puis « Que les doigts /
reconnaissent. » Avec lui, la coupe passe apres « que » : un mot
outil en fin de ligne est une coupe faible et admise, et la
proposition reste entiere. Le titre ne porte plus de : en
posant la cesure a la main on cassait « une prise en main » ou on
laissait « souviennent. » seul en bas. Laisse a lui-meme, l'equilibrage
coupe apres chaque groupe de mots. */
#courbes h2{text-wrap:balance}
/* Ce panneau partage sa largeur avec la canette : sa colonne fait 606 px
quand celle des panneaux pleine page en fait 724. A 56 px, « Soixante-
deux courbes. » y mesure 679 px et se casse en deux. Quarante-huit
suffisent a faire tenir les trois lignes, et un titre un peu plus
petit se justifie de toute facon a cote d'un objet. */
/* La taille suit la colonne, et non l'inverse.
La colonne des courbes vaut (largeur - 2x--bord - 48) / 2. Or --bord
passe de 24 px a 0 a 1069 px : la colonne fait un SAUT de 48 px a cet
endroit precis. Une seule formule lineaire ne peut pas le suivre — il
en faut une de chaque cote.
A 48 px fixes, la plus longue ligne reclame 582 px. Elle ne tient plus
des que la fenetre passe sous 1232, et chaque ligne se coupait alors
une seconde fois : « vue, » et « tenue. » tombaient seules. C'est
exactement ce que produit une barre laterale de navigateur — l'ecran
est large, la fenetre ne l'est plus.
Le rapport texte/corps vaut 12,125 : a n px de corps, la ligne mesure
12,125 n. Les deux formules ci-dessous gardent toujours 10 px de jeu. */
@media (min-width:834px) and (max-width:1068px){
#courbes h2{font-size:clamp(26px, calc(4vw - 5px), 44px);line-height:1.083}
}
@media (min-width:1069px){
#courbes h2{font-size:clamp(26px, calc(4vw - 2.8px), 48px);line-height:1.083}
}
/* Une mesure a garder en tete pour ce titre : la colonne fait 606 px a
1440, et Poppins est une geometrique dont les rondes sont tres larges.
Compter les signes n'y sert a rien — « Concue pour etre vue. » est
plus COURTE de deux signes que « Faite pour etre tenue. » et plus
LARGE de vingt et un pixels. Toute phrase posee ici se mesure au
canvas, pas au nombre de caracteres. Les deux lignes actuelles font
546 et 530 px : de la marge des deux cotes. */
.poig{display:flex;align-items:center;gap:12px;margin:24px 0 0;font-size:12px;
line-height:16px;letter-spacing:-.12px;color:#A1A1A6;transition:opacity .4s var(--e)}
.poig i{display:block;width:40px;height:1px;background:currentColor;transform-origin:left;
animation:resp 3.2s var(--e) infinite}
@keyframes resp{0%,100%{transform:scaleX(.3);opacity:.5}50%{transform:scaleX(1);opacity:1}}
/* L'indication ne s'efface plus au premier mouvement. On la voyait
disparaitre pile au moment ou on comprenait a quoi elle servait, et
elle ne revenait jamais — y compris en revenant sur la section plus
tard. */
/* --- la mise en page centrée -----------------------------------
Le produit n'est pas dans un cadre : il est posé sur le noir.
Sa photo a un fond à rgb(2,2,2), donc la section prend le même —
le rectangle disparaît sans qu'il faille détourer quoi que ce soit.
#030302 n'est donc PAS un doublon de --noir : c'est la valeur exacte
du fond de la photo. La ramener à #000 ferait réapparaître le
rectangle de l'image sur le noir de la section. Ne pas « corriger ». */
.sec--centre{background:#030302;text-align:center}
.sec--centre .t56{max-width:none;margin:0 auto}
/* --- les versions mobiles des images ---------------------------------
Les photos pleine page pesaient jusqu'a 624 Ko pour etre affichees sur
375 px de large : quatre fois trop de pixels envoyes a un telephone.
Chaque lourde est desormais enveloppee d'un qui sert
un fichier reduit sous 833 px.
Le ne doit rien changer a la mise en page : `display:contents`
le fait disparaitre de la boite, et l' redevient l'enfant direct
du comme avant. La regle est limitee aux figures — le
du hero, lui, est positionne et doit rester une boite. */
figure > picture{display:contents}
/* L'image de fond du panneau creatif est en CSS, elle ne peut pas passer
par un : c'est une requete de media qui choisit. */
@media (max-width:833px){
/* Le culot de la canette occupe le coin bas-gauche de la photo du
lettrage, et le sertissage y est visible. Le fichier mobile est
donc coupe en dessous — 1180 px sur 1600 gardes.
Consequence a assumer : l'image devient plus large que haute, donc
le cadrage de remplissage rogne desormais la largeur, et le mot ne
tient plus entier (520 px de mot pour 432 px de fenetre, c'est
geometrique). On centre la coupe sur le mot plutot que sur
l'image : les deux bords sont entames du meme nombre de pixels au
lieu d'un L tranche et d'un S intact. */
#lettrage img{object-position:40% 50%}
/* L'image de repli mobile est tiree du montage VERTICAL, pas du
16/9 : sinon, quand la lecture ne demarre pas, on voit un plan
large ecrase et rogne aux deux tiers. 84 Ko. */
.creatif .grand__fond{background-image:url(../assets/creatif-poster-mobile.jpg);
background-position:50% 50%}
/* Le montage mobile est deja cadre autour de l'homme : plus besoin de
decaler l'image vers la droite comme sur le 16/9. */
.film{object-position:50% 50%}
}
/* --- plaques photo ---------------------------------------------------
Les prises de vue produit sont toutes en portrait : on les montre en
portrait. Un recadrage panoramique couperait le haut et le bas de la
canette. Seule la macro (gouttes) tolere un
cadre large, parce qu'il n'y a pas d'objet entier a preserver. */
.plaque{margin:72px auto 0;padding:0 var(--bord);max-width:var(--contenu);
display:flex;justify-content:center}
@media (max-width:734px){ .pose img{height:44svh} .eyebrow{font-size:17px} }
/* --- 7 · les chiffres ------------------------------------------ */
/* Aligne en BAS, et non en haut : les trois premieres valeurs sont d'un
corps superieur, et si les cases s'alignaient par le haut leurs
libelles descendraient plus bas que ceux de leurs voisines. La ligne
de libelles doit rester droite ; ce sont les chiffres qui depassent. */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:56px 20px;margin-top:80px;
align-items:end}
/* Nitrates, sodium, calcium : les trois valeurs qu'un acheteur cherche
en premier. Un corps au-dessus, un filet au-dessus d'elles, et leur
libelle en clair au lieu du gris. */
.stat--cle{position:relative;padding-top:20px}
.stat--cle::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;
background:currentColor;opacity:.45}
.stat.stat--cle > span{color:var(--clair)}
/* Les valeurs font defiler leurs chiffres au moment ou on les atteint.
A chasse proportionnelle un 1 est deux fois plus etroit qu'un 8 : la
roue changerait de largeur en tournant. La chasse fixe est donc une
condition, pas une coquetterie. */
/* `tabular-nums` est ecrit, mais il ne fait RIEN : le fichier Poppins
livre ici ne contient pas de chiffres a chasse fixe. Mesure sur la
page en ligne, a 48 px : « 111 » fait 51,0 px et « 888 » 91,5 px,
avec ou sans la regle. Un 1 mesure 17 px, un 8 en mesure 30,5.
La fenetre d'une roue prend la largeur du plus large de ses vingt
chiffres, soit 26,2 px. Un 1 s'y posait A GAUCHE et laissait 9,2 px
de vide a sa droite — on lisait « 1 31 » au lieu de « 131 ».
On centre donc chaque chiffre dans sa fenetre : c'est exactement ce
que ferait une vraie chasse fixe, et ca ne depend d'aucune fonction
OpenType absente. On garde la declaration au cas ou la police serait
remplacee un jour par une version qui la porte. */
.stat p{font-variant-numeric:tabular-nums}
.roue b{text-align:center}
/* Une roue = une fenetre haute d'une seule case, et dedans une colonne
de vingt cases (0 a 9, deux fois). Le script la fait glisser de
(10 + chiffre) cases. Comme la colonne compte exactement vingt cases,
une case vaut 5 % de sa hauteur : rien n'est mesure en pixels, tout
suit la taille du texte, y compris sur telephone.
1,06em plutot que 1em : a 1em les chiffres se font raser en haut. */
.roue{display:inline-block;overflow:hidden;height:1.06em;vertical-align:bottom}
.roue b{display:block;height:1.06em;line-height:1.06em;font-weight:inherit}
.roue-sep{display:inline-block;height:1.06em;line-height:1.06em;vertical-align:bottom}
/* La transition est posee des la construction : si on l'ajoutait en meme
temps que le deplacement, le navigateur n'aurait pas d'etat de depart
a animer et la roue sauterait directement sur son chiffre.
La courbe compte autant que la duree. Une decelaration extreme du type
cubic-bezier(.22,1,.36,1) expedie 80 % du trajet dans les 20 premiers
pour cent du temps : la roue file, puis se pose pendant une eternite,
et rallonger la duree ne fait qu'allonger l'attente. Celle-ci demarre
doucement, tourne a vitesse presque constante, puis freine a la fin —
on voit passer les chiffres, ce qui est tout l'interet. */
.roue__c{display:block;will-change:transform;
transition:transform var(--d,2.6s) cubic-bezier(.35,.02,.2,1)}
@media (prefers-reduced-motion:reduce){ .roue__c{transition:none} }
/* Lu par les lecteurs d'ecran, invisible a l'oeil : les roues affichent
vingt chiffres chacune, il leur faut la vraie valeur a cote. */
.lu{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Enfant DIRECT : cette regle habille le libelle sous le nombre. Sans le
« > » elle attrape aussi les spans des roues de chiffres, qu'elle
repasse en bloc et en 17 px — et la roue se met a occuper toute la
colonne au lieu d'un chiffre. */
.stat > span{display:block;margin-top:8px;font-size:17px;line-height:21px;
letter-spacing:-.37px;color:#A1A1A6}
/* Dix valeurs : cinq colonnes sur deux rangees pleines. A quatre
colonnes il en restait deux orphelines sur une troisieme ligne. */
@media (max-width:1068px){ .stats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:833px){ .stats{grid-template-columns:repeat(2,1fr);gap:40px 20px} }
/* --- 8 · les cartes -------------------------------------------- */
/* --- 5 · l'eau : texte a gauche, panneau d'eau a droite ----------
Le fond reste noir et dominant. L'image est un objet pose a cote du
texte, avec les bords fondus : l'eau semble sortir de l'obscurite
au lieu d'etre encadree. */
.eau__duo{display:grid;grid-template-columns:1.28fr 0.72fr;gap:56px;
align-items:center;max-width:var(--contenu);margin:0 auto;padding:0 var(--bord)}
.eau__dire{min-width:0}
.eau__panneau{margin:0;min-width:0}
.eau__panneau img{display:block;width:100%;height:min(74svh,740px);object-fit:cover;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%),
linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%),
linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
mask-composite:intersect}
@media (max-width:833px){
/* On empile : le texte, puis l'eau en pleine largeur mais basse,
puis le tableau. */
/* Sur telephone la photo vient se glisser DANS le texte : apres le
paragraphe de la source, avant la ligne grise.
Le bloc de texte n'a qu'un seul enfant dans la grille, donc rien ne
peut s'intercaler entre ses paragraphes. `display:contents` le fait
disparaitre en tant que boite : ses paragraphes deviennent eux-memes
des elements de la grille, et `order` peut alors placer la photo au
milieu d'eux.
L'ecart de la grille passe a zero : sinon ses 48 px s'appliqueraient
entre CHAQUE paragraphe. Les marges propres des paragraphes suffisent,
et la photo porte les siennes. */
.eau__duo{grid-template-columns:1fr;gap:0}
.eau__dire{display:contents}
.eau__panneau{order:1;margin:36px 0 4px}
.eau__dire > .gris{order:2}
.eau__panneau img{height:min(42svh,380px)}
}
/* --- la galerie des lieux ---------------------------------------
Six cadres, beaucoup d'air, un mot discret sous chacun. Les images
vivent dans assets/lieux/ : remplacer un fichier suffit, le code
n'a pas a bouger. */
/* Sept cases dans une grille de trois colonnes laisseraient la derniere
seule dans un coin. On passe donc en rangees souples, centrees : la
derniere ligne se cale au milieu quel que soit le nombre de cases. */
/* Le bouton sous la galerie des lieux. Aucune phrase autour : la section
parle deja a ceux qu'elle concerne, et un bouton seul se demande ce qu'il
y a derriere. Meme rythme vertical que la galerie, 88 px. */
/* Le bloc qui ferme la section des lieux. Aucun filet : c'est l'air seul qui
le detache de la galerie, sinon il se lirait comme une legende des photos
au lieu d'etre l'invitation qui conclut la page. */
.lieux__fin{margin-top:136px;display:flex;flex-direction:column;
align-items:center;text-align:center}
.lieux__fin p{max-width:22ch;margin-bottom:36px;color:var(--clair)}
@media (max-width:833px){
.lieux__fin{margin-top:96px}
.lieux__fin p{font-size:24px;line-height:28px;margin-bottom:28px}
}
.btn--grand{font-size:17px;line-height:22px;padding:17px 46px;min-height:58px;letter-spacing:.2px}
@media (max-width:833px){ .btn--grand{font-size:16px;padding:15px 28px;min-height:52px} }
.galerie{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:88px}
.galerie figure{margin:0;min-width:0;flex:0 1 calc((100% - 48px) / 3)}
/* height:auto est indispensable : sans elle l'attribut height du HTML
fixe la hauteur et aspect-ratio n'a plus aucun effet. */
.galerie img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
border-radius:18px;background:var(--sombre)}
.galerie figcaption{margin-top:14px;font-size:12px;line-height:16px;
letter-spacing:-.12px;color:#A1A1A6}
@media (max-width:1068px){ .galerie figure{flex:0 1 calc((100% - 24px) / 2)} }
@media (max-width:600px){ .galerie{gap:32px} .galerie figure{flex:0 1 100%} }
.sec--pale .carte{background:#fff}
.sec--pale .gris{color:var(--ink)}
@media (max-width:1068px){ .cartes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:734px){ .cartes{grid-template-columns:1fr} }
/* --- 9 · le pied : mentions, colonnes,
barre de bas de page séparée par un filet. ---------------------- */
.pied{background:var(--clair);color:var(--gris);padding:20px 0 40px;
font-size:12px;line-height:16px;letter-spacing:-.12px}
.pied__note{max-width:var(--contenu);margin:0 auto;padding:0 var(--bord) 18px}
.pied__note p{margin-bottom:8px;max-width:none}
.pied__cols{max-width:var(--contenu);margin:0 auto;padding:18px var(--bord);
border-top:1px solid rgba(0,0,0,.12);
display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pied__cols h3{font-size:12px;line-height:16px;font-weight:600;color:var(--ink);
margin-bottom:6px}
.pied__cols ul{list-style:none}
.pied__cols a{display:inline-flex;align-items:center;min-height:44px;color:var(--gris)}
.pied__cols a:hover{text-decoration:underline;color:var(--ink)}
.pied__bas{max-width:var(--contenu);margin:0 auto;padding:18px var(--bord) 0;
border-top:1px solid rgba(0,0,0,.12);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied__bas nav{display:flex;gap:0;flex-wrap:wrap}
.pied__bas a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
border-left:1px solid rgba(0,0,0,.2)}
.pied__bas a:first-child{padding-left:0;border-left:0}
.pied__bas a:hover{text-decoration:underline}
@media (max-width:833px){ .pied__cols{grid-template-columns:repeat(2,1fr)} }
/* Le pied du hero se detache sur la partie claire de la photo :
il passe donc a l'encre, et le bouton avec lui. */
/* --- 12 · le bandeau de fin ------------------------------------
Une bande qui ferme le panneau de l'aluminium. Pas une image posee a
cote du texte : la photo vient APRES le propos et le clot, comme la
derniere ligne d'un paragraphe.
Elle tient dans la meme colonne que tout le reste, et non bord a
bord : le site n'a aucune image pleine largeur, une seule aurait
jure. Au-dela de 1069 px la marge tombe a zero, la bande fait donc
exactement les 1260 px du contenu — la meme laisse que les titres.
Les coins repris des tuiles des lieux, 28 px. */
.sec--bandeau{padding-bottom:56px}
.bandeau{max-width:var(--contenu);margin:112px auto 0;
padding:0 var(--bord);line-height:0}
/* `height:auto` n'est pas decoratif : les attributs width/height de
la balise valent une declaration CSS de tres faible poids.
Sans lui, le navigateur prenait la hauteur du fichier au pied de
la lettre et ignorait `aspect-ratio` — la bande faisait 607 px de
haut sur un telephone de 331 px de large.
Le rapport EXACT de la photo, et non une hauteur libre : la colonne
etant plafonnee a 1260 px, la bande ne depasse jamais 539 px de haut
et rien n'est jamais rogne. Avec une hauteur imposee, entre 834 et
1068 px de fenetre le cadre devenait plus etire que la photo et
coupait le bas des etiquettes — « CREATIVE EMERGENCY » y perdait sa
derniere ligne. Si la photo change, ce rapport change avec elle. */
.bandeau img{display:block;width:100%;height:auto;aspect-ratio:1450/585;max-height:540px;
object-fit:cover;object-position:50% 50%;border-radius:28px}
@media (max-width:833px){
.sec--bandeau{padding-bottom:40px}
.bandeau{margin-top:60px}
/* Le telephone recoit sa propre photo, plus large, et suit SON
rapport a elle. Avec une hauteur imposee, la colonne de 331 px
rognait les cotes d'un quart et il ne restait que deux canettes
dans le cadre : on ne voyait plus un rayon, on voyait un gros
plan. A son rapport, la rangee entiere tient. */
.bandeau img{aspect-ratio:1450/630;max-height:none;border-radius:20px}
}