/* NMD3D, DA Coulisses : le carnet du réalisateur.
   Papier, noir, rouge cinéma. Bricolage Grotesque (titres en bas de casse, la largeur 75 pour ce qui claque),
   Space Mono pour les étiquettes, Permanent Marker pour deux ou trois mots au marqueur.
   Toutes les règles vivent sous .cl-page pour ne rien toucher des pages actuelles du site. */

@font-face{font-family:"Bricolage Grotesque";src:url("https://cdn.prod.website-files.com/6970c7cf74936ff22939dd5e/6ad8d4cf76b38f20009524c1_cl-bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Space Mono";src:url("https://cdn.prod.website-files.com/6970c7cf74936ff22939dd5e/6ad8d511aac9df9edc93e28c_cl-spacemono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("https://cdn.prod.website-files.com/6970c7cf74936ff22939dd5e/6ad8d51196d304b0f51ac9b8_cl-spacemono-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url("https://cdn.prod.website-files.com/6970c7cf74936ff22939dd5e/6ad8d50d48b5df44619342e1_cl-marker.woff2") format("woff2");font-weight:400;font-display:swap}

html.cl-html,html.cl-html body{background:#F1ECE2;margin:0}
.cl-page{
  --papier:#F1ECE2; --noir:#141414; --rouge:#E1251B; --blanc:#FFFFFF; --gris:#6B665D;
  --filet:rgba(20,20,20,.18); --voile:rgba(20,20,20,.06); --ombre:0 1px 10px rgba(0,0,0,.75);
  --f-titre:"Bricolage Grotesque",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Space Mono",ui-monospace,Menlo,monospace;
  --f-marq:"Permanent Marker","Marker Felt",cursive;
  --gout:clamp(18px,4vw,48px);
  --large:1440px;
  background:var(--papier);color:var(--noir);font-family:var(--f-titre);font-weight:500;font-variation-settings:"opsz" 24;
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh
}
.cl-page *,.cl-page *::before,.cl-page *::after{box-sizing:border-box}
.cl-page img,.cl-page video{display:block;max-width:100%;height:auto;border-radius:0}
.cl-page a{color:inherit;text-decoration:none}
.cl-page p{margin:0}
/* les styles de balise hérités du projet Webflow (paragraphes, listes, liens) ne passent pas : spécificité basse, les classes gardent la main */
.cl-page :where(p,li,dt,dd,label,legend,a,span,h1,h2,h3,figcaption,blockquote){font-family:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;font-size:inherit;font-weight:inherit}
.cl-page :where(h1,h2,h3){font-weight:800}
.cl-page h1,.cl-page h2,.cl-page h3{margin:0;font-family:var(--f-titre);font-weight:800;color:inherit}
.cl-page ul,.cl-page ol{margin:0;padding:0;list-style:none}
.cl-page button,.cl-page input,.cl-page textarea,.cl-page select{font:inherit;color:inherit}
.cl-page :focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.cl-page ::selection{background:var(--rouge);color:#fff}

/* ---------- typographie ---------- */
.cl-t{font-weight:800;font-variation-settings:"opsz" 96,"wdth" 100;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
.cl-c{font-weight:800;font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-.015em;line-height:.86}
.cl-m{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.cl-mn{font-family:var(--f-mono);font-weight:400;font-size:14px;line-height:1.55}
.cl-rouge{color:var(--rouge)}
.cl-blanc{color:#fff}
.cl-ombre{text-shadow:var(--ombre)}
.cl-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.5;max-width:34em}
.cl-texte{font-size:17px;line-height:1.6;max-width:36em}
.cl-texte p+p{margin-top:1em}
.cl-croix{font-family:var(--f-mono);font-weight:700;color:var(--rouge);margin-right:.55em}
.cl-h1{font-size:clamp(44px,8.4vw,112px)}
.cl-h2{font-size:clamp(36px,5.6vw,76px)}
.cl-h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.035em;line-height:1}
.cl-geant{font-size:clamp(84px,21vw,300px)}

/* le marqueur */
.cl-mq{font-family:var(--f-marq);color:var(--rouge);line-height:1;white-space:nowrap;position:absolute;z-index:3;pointer-events:none;font-size:clamp(20px,2.4vw,30px)}
.cl-mq.cl-sur{color:#fff;text-shadow:var(--ombre)}
.cl-mot{position:relative;display:inline-block;white-space:nowrap}
.cl-mot>svg{position:absolute;left:-2%;top:calc(100% - .06em);width:104%;height:.24em;overflow:visible}
.cl-trace{fill:none;stroke:var(--rouge);stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cl-trace path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s cubic-bezier(.3,.6,.3,1)}
.cl-vu .cl-trace path,.cl-trace.cl-vu path,html:not(.cl-js) .cl-trace path{stroke-dashoffset:0}
.cl-trace-abs{position:absolute;z-index:3;pointer-events:none}

/* le titre tapé */
.cl-tape .cl-l{visibility:hidden}
.cl-tape .cl-l.on{visibility:visible}
/* 23/10, audit (D02) : le texte d'un paragraphe tapé, redonné aux lecteurs d'écran (copie invisible posée par le script) */
.cl-lu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* images : le brut en noir et blanc, avec son grain */
.cl-ph{position:relative;overflow:hidden;background:#2a2a2a}
.cl-ph>img,.cl-ph>video{width:100%;height:100%;object-fit:cover}
.cl-ph>picture{display:block;width:100%;height:100%}
.cl-ph>picture>img{width:100%;height:100%;object-fit:cover}
.cl-nb::after{content:"";position:absolute;inset:0;background-image:url("https://cdn.prod.website-files.com/6970c7cf74936ff22939dd5e/6ad8d50dbfeee8386c8caf05_cl-grain.png");background-size:200px;mix-blend-mode:overlay;opacity:.5;pointer-events:none;z-index:1}
.cl-nb>img{filter:grayscale(1) contrast(1.12)}

/* ---------- mise en page ---------- */
.cl-int{width:100%;max-width:var(--large);margin-inline:auto;padding-left:var(--gout);padding-right:var(--gout)}
.cl-sec{padding-block:clamp(48px,8vw,112px)}
.cl-sec+.cl-sec{border-top:1.5px solid var(--noir)}
.cl-tete{display:grid;gap:14px;margin-bottom:clamp(26px,4vw,48px);max-width:900px}
.cl-filet{border-top:1.5px solid var(--noir)}
.cl-evite{position:absolute;left:-9999px;top:0;z-index:100;background:var(--noir);color:var(--papier);padding:10px 14px}
.cl-evite:focus{left:12px;top:12px}

/* boutons */
.cl-page .cl-btn{display:inline-flex;align-items:center;gap:10px;background:var(--noir);color:var(--papier);font-family:var(--f-mono);font-weight:700;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:16px 20px;border:0;cursor:pointer;transition:background .15s}
.cl-page .cl-btn:hover{background:var(--rouge);color:#fff}
.cl-page .cl-btn.cl-rge{background:var(--rouge);color:#fff}
.cl-page .cl-btn.cl-rge:hover{background:var(--noir)}
.cl-lien{display:inline-block;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:2px solid currentColor;padding-bottom:3px;transition:color .15s}
.cl-lien:hover{color:var(--rouge)}
.cl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}

/* ---------- en-tête ---------- */
.cl-nav{position:sticky;top:0;z-index:50;background:var(--papier);border-bottom:1.5px solid var(--noir)}
.cl-nav .cl-int{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}
.cl-logo img{height:28px;width:auto}
.cl-liens{display:none;align-items:center;gap:22px}
.cl-liens .cl-pole{font-weight:800;font-variation-settings:"opsz" 96,"wdth" 75;font-size:28px;letter-spacing:-.01em;line-height:1}
.cl-liens .cl-sec-l{font-weight:600;font-size:16px}
.cl-liens a{position:relative}
.cl-liens a[aria-current]::after,.cl-liens a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--rouge)}
.cl-liens .cl-btn::after{display:none}
.cl-sep{width:1.5px;height:26px;background:var(--filet)}
.cl-page .cl-burger{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.08em;background:transparent;border:1.5px solid var(--noir);padding:9px 12px;cursor:pointer}
@media (min-width:1100px){ .cl-liens{display:flex} .cl-page .cl-nav .cl-burger{display:none} .cl-nav .cl-int{min-height:76px} .cl-logo img{height:32px} }
.cl-menu{position:fixed;inset:0;z-index:60;background:var(--papier);display:none;flex-direction:column;overflow-y:auto;
  padding:0 var(--gout) 32px}
.cl-menu.ouvert{display:flex}
.cl-menu .cl-menu-haut{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1.5px solid var(--noir);margin-inline:calc(var(--gout)*-1);padding-inline:var(--gout)}
.cl-menu .cl-gros{padding-top:24px}
.cl-menu .cl-gros ul{display:grid;gap:2px}
.cl-menu .cl-gros a{font-weight:800;font-variation-settings:"opsz" 96,"wdth" 75;font-size:clamp(40px,22vw,140px);line-height:.86;letter-spacing:-.015em}
.cl-menu .cl-petits ul{display:grid;gap:10px}
.cl-menu .cl-petits{padding-top:22px;margin-top:22px;border-top:1.5px solid var(--noir);font-size:26px;font-weight:800;letter-spacing:-.04em;font-variation-settings:"opsz" 96}
.cl-menu .cl-menu-bas{margin-top:auto;padding-top:28px;display:grid;gap:14px}
body.cl-fige{overflow:hidden}

/* ---------- pied ---------- */
.cl-pied{background:var(--noir);color:var(--papier)}
.cl-pied .cl-int{padding-block:clamp(48px,7vw,88px) 28px;display:grid;gap:36px}
.cl-pied .cl-pied-haut{display:grid;gap:28px}
.cl-pied .cl-phrase{font-size:clamp(36px,5vw,64px)}
.cl-pied .cl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px}
.cl-pied .cl-cols a{display:block;padding:3px 0}
.cl-pied .cl-cols a:hover{color:var(--rouge)}
.cl-pied .cl-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1.5px solid rgba(241,236,226,.25);padding-top:18px;color:rgba(241,236,226,.7)}
.cl-pied .cl-bas a{text-decoration:underline;text-underline-offset:3px}
.cl-pied .cl-bas a:hover{color:var(--rouge)}
.cl-page .cl-pied .cl-btn{background:var(--papier);color:var(--noir)}
.cl-page .cl-pied .cl-btn:hover{background:var(--rouge);color:#fff}
.cl-pied .cl-logo-pied{height:40px;width:auto}

/* ---------- accueil : le carnet ouvert ---------- */
.cl-hero{padding-block:clamp(18px,3vw,40px) clamp(40px,6vw,80px)}
.cl-hero .cl-int{display:grid;gap:26px}
.cl-hero .cl-photo{position:relative;aspect-ratio:4/5}
.cl-hero .cl-photo .cl-ph>img{object-position:50% var(--cl-haut,0%)}
.cl-hero .cl-txt{display:grid;gap:20px;align-content:center}
.cl-etq-photo{position:absolute;left:14px;top:14px;z-index:3;color:#fff;background:rgba(20,20,20,.62);padding:5px 8px 4px;line-height:1}
/* 23/10, audit (D04) : pendant la boucle, l'étiquette dit ce qu'on voit et le marqueur se cache ; sur la photo d'affiche, rien ne change */
.cl-etq-boucle{display:none}
.cl-hero .cl-photo.cl-boucle-on>.cl-etq-affiche{display:none}
.cl-hero .cl-photo.cl-boucle-on>.cl-etq-boucle{display:block}
.cl-hero .cl-photo>.cl-mq,.cl-hero .cl-photo>.cl-trace-abs{transition:opacity .35s}
.cl-hero .cl-photo.cl-boucle-on>.cl-mq,.cl-hero .cl-photo.cl-boucle-on>.cl-trace-abs{opacity:0}
/* 23/10, audit (D02) : à l'ordinateur, le slogan tient en trois lignes (« vos histoires, / traitées comme / du cinéma. ») :
   sa taille suit la largeur de sa colonne (15 % de la colonne : trois lignes de 900 à 1 920 px ; 16 % en refait quatre) */
@media (min-width:900px){ .cl-hero .cl-txt{container-type:inline-size} .cl-hero .cl-h1{font-size:clamp(44px,15cqi,112px)} }
@media (max-width:899px){
  /* 22/10 : au téléphone, la phrase et le devis tiennent dans le premier écran */
  .cl-hero{padding-block:12px 40px}
  .cl-hero .cl-int{gap:18px}
  .cl-hero .cl-photo{aspect-ratio:1/1}
  .cl-hero .cl-txt{gap:14px}
}
@media (min-width:900px){
  .cl-hero .cl-int{grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
  .cl-hero .cl-photo{order:2}
}

/* les pôles en bandes photo */
.cl-poles{display:grid;gap:18px}
.cl-pole-b{position:relative;display:block}
.cl-pole-b .cl-ph{aspect-ratio:16/10}
.cl-pole-b .cl-etq{position:absolute;left:0;bottom:-1px;z-index:2;background:var(--papier);padding:12px 18px 6px 0;display:grid;gap:4px}
.cl-pole-b .cl-etq .cl-c{font-size:clamp(52px,7vw,84px)}
.cl-pole-b:hover .cl-etq .cl-c{color:var(--rouge)}
.cl-pole-b .cl-ph>img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cl-pole-b:hover .cl-ph>img{transform:scale(1.03)}
@media (min-width:900px){ .cl-poles{grid-template-columns:repeat(3,1fr);gap:22px} .cl-pole-b .cl-ph{aspect-ratio:4/5} }

/* les films (cartes) */
.cl-films{display:grid;gap:30px 20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.cl-films.cl-six{grid-template-columns:repeat(2,1fr);gap:24px 12px}
@media (min-width:900px){ .cl-films.cl-six{grid-template-columns:repeat(3,1fr);gap:36px 22px} }
.cl-carte{display:grid;gap:10px;align-content:start}
.cl-carte>.cl-m{min-height:2.7em}
.cl-carte .cl-ph{aspect-ratio:4/5}
.cl-carte .cl-ph>img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cl-carte:hover .cl-ph>img,.cl-carte:hover .cl-apercu{transform:scale(1.03)}
.cl-carte .cl-h3{transition:color .15s}
.cl-carte:hover .cl-h3{color:var(--rouge)}
.cl-carte[hidden]{display:none}
.cl-carte.cl-site .cl-ph{background:var(--noir)}
.cl-carte.cl-site .cl-ph>img{object-fit:cover;object-position:50% 0} /* 23/10, audit (C29) : la capture du site au téléphone remplit la carte */
.cl-filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cl-filtres button{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:transparent;
  border:1.5px solid var(--noir);padding:10px 12px;cursor:pointer}
.cl-filtres button[aria-pressed="true"]{background:var(--noir);color:var(--papier)}

/* la coupe sèche */
.cl-coupe{position:relative}
.cl-coupe>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.cl-coupe>img.on,.cl-coupe>img:first-child{opacity:1}
.cl-coupe.cl-joue>img:first-child:not(.on){opacity:0}
/* 23/10, audit (E02) : trois cadres verticaux côte à côte, chacun au format des photos (9:16), sans recadrage */
.cl-coupe-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1vw,14px)}
.cl-coupe-3 .cl-coupe{aspect-ratio:9/16}

/* clients */
.cl-clients{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:clamp(24px,3.2vw,40px);font-weight:800;letter-spacing:-.04em;font-variation-settings:"opsz" 96;line-height:1.15}
.cl-clients li:not(:last-child)::after{content:" ·";color:var(--rouge)}
/* 23/10, audit (D05) : les noms sont des liens ; au survol ils passent au rouge, et sans souris (téléphone, tablette) une petite flèche
   rouge prend la place du point rouge pour dire qu'on peut appuyer (non lue par les lecteurs d'écran, comme les flèches de C66) */
.cl-clients a{transition:color .15s}
.cl-clients a:hover{color:var(--rouge)}
@media (hover:none){
  .cl-clients li:not(:last-child)::after{content:none}
  .cl-clients a::after{content:"→";content:"→" / "";font-family:var(--f-mono);font-weight:700;font-size:.55em;color:var(--rouge-txt);margin-left:.3em;vertical-align:.3em}
}

/* le prix */
.cl-prix{display:grid;gap:26px}
.cl-prix .cl-geant .cl-rouge{display:inline}
.cl-liste-x{display:grid}
.cl-liste-x li{display:grid;grid-template-columns:auto 1fr;gap:4px 0;padding:16px 0;border-top:1.5px solid var(--noir)}
.cl-liste-x li:last-child{border-bottom:1.5px solid var(--noir)}
.cl-liste-x .cl-nom{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.035em;font-variation-settings:"opsz" 96;line-height:1.1}
.cl-liste-x .cl-det{grid-column:2;font-size:15.5px;color:#3a3833}
@media (min-width:900px){ .cl-prix{grid-template-columns:1fr 1.1fr;gap:64px;align-items:start} }

/* étapes */
.cl-etapes{display:grid;gap:0;counter-reset:e}
.cl-etapes li{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-content:start;padding:18px 0;border-top:1.5px solid var(--noir)}
.cl-etapes .cl-n{font-family:var(--f-mono);font-weight:700;color:var(--rouge);font-size:13px;padding-top:6px}
@media (min-width:900px){ .cl-etapes{grid-template-columns:repeat(4,1fr);gap:24px} .cl-etapes li{grid-template-columns:1fr} }

/* le carnet */
.cl-journal{display:grid;gap:44px}
.cl-entree{display:grid;gap:14px;border-top:1.5px solid var(--noir);padding-top:14px;position:relative}
.cl-entree .cl-ph{aspect-ratio:16/10}
.cl-entree .cl-imgs{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.cl-entree .cl-imgs .cl-ph:first-child{grid-row:span 2;aspect-ratio:auto;min-height:100%}
.cl-entree .cl-imgs .cl-ph{aspect-ratio:4/5}
@media (min-width:900px){ .cl-journal.cl-trois{grid-template-columns:repeat(3,1fr);gap:28px} .cl-entree.cl-large{grid-template-columns:1.3fr 1fr;gap:40px;align-items:start} }
.cl-mur{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:700px){ .cl-mur{grid-template-columns:repeat(4,1fr);gap:12px} }
.cl-couv{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--papier);container-type:inline-size;display:block;box-shadow:0 0 0 1.5px var(--noir)}
.cl-couv>img{width:100%;height:100%;object-fit:cover}
.cl-couv .cl-bande-ph{position:absolute;left:0;right:0;top:0;height:62%}
.cl-couv .cl-bande-tx{position:absolute;left:7%;right:7%;bottom:9%;display:grid;gap:3cqw}
.cl-couv .cl-bande-tx .cl-c{font-size:15cqw}
.cl-couv .cl-bande-tx .cl-m{font-size:4.4cqw}
.cl-couv.cl-lettres{display:grid;place-items:center;align-content:center;gap:4cqw}
.cl-page .cl-lt{font-weight:800;font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-.02em;line-height:.8;background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:grayscale(1) contrast(1.15) brightness(1.3)}

/* page pôle : le mot rempli par l'image */
.cl-pole-tete{padding-block:clamp(24px,4vw,56px) clamp(32px,5vw,64px)}
.cl-pole-tete .cl-int{display:grid;gap:22px}
.cl-pole-mot{font-size:clamp(120px,34vw,420px);display:block;white-space:nowrap}
.cl-pole-mot.cl-long{font-size:clamp(78px,19vw,250px)}
/* 23/10, audit (D24) : la boucle des films du terrain, à droite du texte à l'ordinateur, juste sous le grand mot au téléphone */
.cl-pole-duo{display:grid;gap:22px}
.cl-pole-boucle{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--noir);order:-1}
@media (min-width:900px){ .cl-pole-duo{grid-template-columns:minmax(0,1fr) minmax(0,min(420px,34vw));gap:clamp(32px,5vw,72px);align-items:start} .cl-pole-boucle{order:0} }

/* une réalisation */
.cl-rz-tete{position:relative;background:var(--papier)}
.cl-rz-tete .cl-ph{aspect-ratio:4/5;max-height:88vh}
.cl-rz-tete .cl-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 50%,rgba(0,0,0,.75) 100%)}
.cl-rz-tete .cl-tit{background:var(--papier);padding-block:22px 6px}
.cl-rz-tete .cl-tit .cl-int{display:grid;gap:12px}
.cl-rz-tete .cl-tit .cl-blanc{color:var(--noir);text-shadow:none}
.cl-rz-tete .cl-ph::before{display:none}
@media (min-width:900px){
  .cl-rz-tete .cl-ph{aspect-ratio:21/9}
  .cl-rz-tete .cl-ph::before{display:block}
  .cl-rz-tete .cl-tit{position:absolute;left:0;right:0;bottom:0;z-index:3;background:transparent;padding-block:0 clamp(20px,4vw,48px)}
  .cl-rz-tete .cl-tit .cl-blanc{color:#fff;text-shadow:var(--ombre)}
}
.cl-blocs{display:grid;gap:0}
.cl-bloc{display:grid;gap:14px;align-content:start;padding-block:28px;border-top:1.5px solid var(--noir)}
@media (min-width:900px){ .cl-blocs{grid-template-columns:repeat(3,1fr);gap:40px} .cl-bloc{border-top:0;border-left:1.5px solid var(--noir);padding:0 0 0 22px} .cl-bloc:first-child{border-left:0;padding-left:0} }
.cl-fiche{display:grid;grid-template-columns:auto 1fr;gap:0 22px;border-top:1.5px solid var(--noir)}
.cl-fiche dt,.cl-fiche dd{margin:0;padding:11px 0;border-bottom:1px solid var(--filet)}
.cl-fiche dt{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);padding-top:13px}
.cl-film{position:relative;background:#000}
.cl-film video{width:100%;height:auto;max-height:86vh;margin-inline:auto;background:#000}
.cl-film.cl-v{max-width:520px;margin-inline:auto}
.cl-galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cl-galerie .cl-ph{aspect-ratio:4/5}
@media (min-width:900px){ .cl-galerie{grid-template-columns:repeat(4,1fr);gap:12px} }
.cl-suivante{display:grid;gap:10px;padding-block:clamp(36px,6vw,72px)}
.cl-suivante .cl-c{font-size:clamp(56px,10vw,140px);transition:color .15s}
.cl-suivante:hover .cl-c{color:var(--rouge)}

/* avant / après */
.cl-avap{position:relative;aspect-ratio:16/9;overflow:hidden;--pos:50%;user-select:none;touch-action:pan-y;background:#000}
.cl-avap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-avap .cl-apres{clip-path:inset(0 0 0 var(--pos))}
.cl-avap .cl-ligne{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--rouge);z-index:3;pointer-events:none}
.cl-avap .cl-poignee{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);z-index:4;width:54px;height:54px;border-radius:50%;background:var(--rouge);
  color:#fff;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:14px;pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.cl-avap .cl-poignee::before,.cl-avap .cl-poignee::after{content:"";position:absolute;top:50%;margin-top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent}
.cl-avap .cl-poignee::before{left:13px;border-right:9px solid #fff}
.cl-avap .cl-poignee::after{right:13px;border-left:9px solid #fff}
.cl-avap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.cl-avap:has(input:focus-visible){outline:3px solid var(--rouge);outline-offset:3px}
.cl-avap:has(input:focus-visible) .cl-poignee{box-shadow:0 0 0 4px #fff,0 2px 12px rgba(0,0,0,.4)}
.cl-avap .cl-etq-g,.cl-avap .cl-etq-d{position:absolute;top:14px;z-index:4;color:#fff;background:rgba(20,20,20,.74);padding:4px 6px 3px}
.cl-avap .cl-etq-g{left:14px}.cl-avap .cl-etq-d{right:14px}
.cl-paires{display:grid;gap:28px}

/* formulaire : la fiche de tournage */
.cl-form{display:grid;gap:20px}
.cl-champ{display:grid;gap:6px}
.cl-champ label,.cl-champ legend{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cl-champ input,.cl-champ textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--noir);padding:10px 0;font-size:18px;border-radius:0;outline:0}
.cl-champ input:focus,.cl-champ textarea:focus{border-bottom-color:var(--rouge)}
.cl-champ textarea{min-height:120px;resize:vertical}
.cl-champ input::placeholder,.cl-champ textarea::placeholder{color:var(--gris);opacity:1}
.cl-champ fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.cl-cases{display:flex;flex-wrap:wrap;gap:8px}
.cl-cases label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--noir);padding:10px 12px;cursor:pointer;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.cl-cases input{position:absolute;opacity:0;width:1px;height:1px}
.cl-cases label:has(input:checked){background:var(--noir);color:var(--papier)}
.cl-cases label:has(input:focus-visible){outline:3px solid var(--rouge);outline-offset:2px}
.cl-deux{display:grid;gap:20px}
@media (min-width:700px){ .cl-deux{grid-template-columns:1fr 1fr} }
.cl-form-msg{border-left:3px solid var(--rouge);padding:8px 0 8px 14px}
.cl-contact{display:grid;gap:clamp(32px,5vw,64px)}
@media (min-width:900px){ .cl-contact{grid-template-columns:.9fr 1.1fr} }
.cl-coord{display:grid;gap:14px;align-content:start}
.cl-coord .cl-gros-c{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.04em;font-variation-settings:"opsz" 96;line-height:1.05;word-break:break-word}

/* à propos */
.cl-apropos{display:grid;gap:clamp(28px,5vw,64px)}
.cl-apropos .cl-ph{aspect-ratio:4/5;position:relative}
@media (min-width:900px){ .cl-apropos{grid-template-columns:.85fr 1.15fr;align-items:start} .cl-apropos .cl-ph{position:sticky;top:110px} }
.cl-materiel{display:flex;flex-wrap:wrap;gap:8px}
.cl-materiel span{border:1.5px solid var(--noir);padding:7px 10px;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase}

/* mentions */
.cl-legal{max-width:760px}
.cl-legal h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;line-height:1.05;margin-top:36px;margin-bottom:10px;font-variation-settings:"opsz" 96}
.cl-legal p{font-size:16px;line-height:1.6;margin-bottom:.8em}
.cl-legal ul{display:grid;gap:8px;margin-bottom:.8em} .cl-legal li a{font-size:16px;line-height:1.5;text-decoration:underline;text-underline-offset:3px} .cl-legal li a:hover{color:var(--rouge)} /* 23/10, audit (C80) : le plan du site */

/* apparitions */
@media (prefers-reduced-motion:reduce){
  .cl-trace path{transition:none;stroke-dashoffset:0}
  .cl-tape .cl-l{visibility:visible}
  .cl-pole-b .cl-ph>img,.cl-carte .cl-ph>img,.cl-apercu{transition:none}
}

/* ---------- v2 du 22/10/2026 : ce que la relecture par huit personnages a demandé ---------- */
.cl-page{--rouge-txt:#C41E15}
.cl-page .cl-m .cl-rouge,.cl-page .cl-croix,.cl-page .cl-etapes .cl-n{color:var(--rouge-txt)}
@media (max-width:899px){ .cl-page .cl-m{font-size:13px} }
.cl-rassure{color:var(--gris)}
/* en-tête : le téléphone, et le devis à portée de pouce */
.cl-nav-d{display:flex;align-items:center;gap:8px}
.cl-page .cl-nav .cl-devis-tel{padding:9px 12px;font-size:12px;line-height:1.2}
.cl-liens .cl-tel{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.03em;white-space:nowrap}
@media (min-width:1100px){ .cl-nav-d{display:none} .cl-liens{gap:18px} }
@media (min-width:1100px) and (max-width:1279px){ .cl-liens .cl-tel{display:none} }
.cl-menu .cl-mn a{text-decoration:underline;text-underline-offset:3px}
/* cartes : l'aperçu qui bouge et la durée */
.cl-carte .cl-ph{position:relative}
.cl-apercu{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s,transform .5s cubic-bezier(.2,.7,.2,1)}
.cl-apercu.on{opacity:1}
.cl-duree{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(20,20,20,.74);color:#fff;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 7px 3px;line-height:1.2}
.cl-tri{width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
@media (max-width:699px){ .cl-films{grid-template-columns:repeat(2,1fr);gap:24px 10px} .cl-films .cl-h3{font-size:19px;line-height:1.02} .cl-films .cl-carte>.cl-m{font-size:11px} }
/* galeries au format d'origine */
.cl-galerie{display:block;columns:2;column-gap:8px}
.cl-galerie .cl-ph{aspect-ratio:4/5;break-inside:avoid;margin-bottom:8px}
@media (min-width:900px){ .cl-galerie{columns:3;column-gap:12px} .cl-galerie .cl-ph{margin-bottom:12px} }
/* carnet : coulisses, rush ou film */
.cl-page .cl-tag{position:absolute;left:8px;top:8px;z-index:3;background:rgba(20,20,20,.74);color:#fff;padding:4px 6px 3px;font-size:10.5px}
.cl-couv.cl-couv-car>img{object-fit:contain}
/* offres : les questions */
.cl-faq{display:grid;border-top:1.5px solid var(--noir)}
.cl-faq details{border-bottom:1.5px solid var(--noir);padding:16px 0}
.cl-faq summary{cursor:pointer;font-weight:800;font-variation-settings:"opsz" 96,"wdth" 75;font-size:clamp(22px,2.6vw,30px);line-height:1.05;letter-spacing:-.01em;
  list-style:none;display:flex;justify-content:space-between;gap:16px}
.cl-faq summary::-webkit-details-marker{display:none}
.cl-faq summary::after{content:"+";font-family:var(--f-mono);color:var(--rouge-txt)}
.cl-faq details[open] summary::after{content:"\00d7"}
.cl-faq p{margin-top:10px;max-width:62ch;font-size:16.5px;line-height:1.55}

/* ---------- liste C du 22/10/2026 : les corrections de la deuxième relecture qui ne demandaient pas de décision ---------- */
/* le titre des pages pôles et color : le métier et les lieux en h1, le grand mot n'est plus qu'un décor */
.cl-page h1.cl-m{font-family:var(--f-mono);font-weight:700;font-size:inherit;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.cl-page :is(h1,h2,h3).cl-m{font-family:var(--f-mono);font-weight:700;letter-spacing:.06em}
.cl-sur-titre{display:flex;flex-wrap:wrap;gap:0 .5em}
/* plus rien sous 12 px, et le bouton devis du téléphone à 44 px de haut */
.cl-page .cl-tag{font-size:12px}
.cl-duree{font-size:12px}
@media (max-width:699px){ .cl-films .cl-carte>.cl-m{font-size:12px} }
.cl-page .cl-nav .cl-devis-tel,.cl-page .cl-burger{min-height:44px}
/* le formulaire : les listes */
.cl-champ select{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--noir);padding:10px 28px 10px 0;font-size:18px;border-radius:0;outline:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--noir) 50%),linear-gradient(135deg,var(--noir) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cl-champ select:focus{border-bottom-color:var(--rouge)}
/* les fiches : au téléphone, le film d'abord ; à l'ordinateur, la tête laisse voir le haut du film */
@media (max-width:899px){
  .cl-rz-tete.cl-a-film .cl-ph,.cl-rz-tete.cl-a-film .cl-tit .cl-btn{display:none}
  .cl-rz-tete.cl-a-film .cl-tit{padding-block:18px 0}
  .cl-rz-tete.cl-a-film+.cl-sec-film{padding-top:18px}
}
@media (min-width:900px){ .cl-rz-tete .cl-ph{max-height:62vh} }
/* les photos des fiches : au téléphone, les horizontales sur toute la largeur ; chacune s'agrandit */
@media (max-width:899px){
  .cl-galerie{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:dense;gap:8px;columns:auto}
  .cl-galerie .cl-ph{margin:0}
  .cl-galerie .cl-hz{grid-column:1/-1}
}
.cl-agrandir{display:block;cursor:zoom-in}
.cl-agrandir>img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cl-agrandir:hover>img{transform:scale(1.03)}
.cl-visio{position:fixed;inset:0;z-index:70;background:#0E0E0E;display:none;align-items:center;justify-content:center;padding:64px 12px 56px}
.cl-visio.ouvert{display:flex}
.cl-visio img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cl-page .cl-visio button{position:absolute;min-width:44px;min-height:44px;background:transparent;color:var(--papier);border:1.5px solid rgba(241,236,226,.6);
  font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.08em;cursor:pointer;padding:8px 12px}
.cl-page .cl-visio button:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.cl-visio .cl-visio-f{top:12px;right:12px}
.cl-visio .cl-visio-p{left:12px;top:50%;transform:translateY(-50%)}
.cl-visio .cl-visio-s{right:12px;top:50%;transform:translateY(-50%)}
.cl-visio .cl-visio-leg{position:absolute;left:12px;right:12px;bottom:14px;color:rgba(241,236,226,.8);text-align:center}
@media (max-width:699px){ .cl-visio .cl-visio-p,.cl-visio .cl-visio-s{top:auto;bottom:6px;transform:none} .cl-visio .cl-visio-leg{bottom:62px} .cl-visio{padding-bottom:110px} }
/* le carnet : les trois images remplissent un cadre fixe, sans trou dans la colonne de droite */
.cl-entree .cl-imgs{grid-template-rows:1fr 1fr;aspect-ratio:5/4}
.cl-entree .cl-imgs .cl-ph,.cl-entree .cl-imgs .cl-ph:first-child{aspect-ratio:auto;min-height:0;height:100%}
/* relecture rapide du 22/10 : la tête des fiches reprend toute la largeur à l'ordinateur (le 62vh posé sur un cadre 21/9
   rétrécissait l'image à 1 302 px sur 1 440), et un élément masqué le reste même quand une règle lui donne display:flex */
@media (min-width:900px){ .cl-rz-tete .cl-ph{aspect-ratio:auto;width:100%;max-width:none;height:min(62vh,42.86vw);max-height:none} }
.cl-page [hidden]{display:none!important}
/* ---------- liste B du 22/10/2026, choisie par Noah ---------- */
/* le prix : un prix de départ par terrain */
.cl-prix-3{display:grid;border-top:1.5px solid var(--noir)}
.cl-prix-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0 8px;border-bottom:1.5px solid var(--noir)}
.cl-prix-l .cl-c{font-size:clamp(40px,6.4vw,84px)}
.cl-prix-l:hover .cl-c:first-child{color:var(--rouge)}
/* l'ouverture : la boucle des films par-dessus la photo, qui sert d'affiche */
.cl-boucle-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity .35s}
.cl-boucle-v.on{opacity:1}
/* la ligne « aussi » sous les trois terrains */
.cl-aussi{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:22px}
/* le fond des films : noir seulement autour du lecteur et de la fiche technique */
.cl-sec-film:has(.cl-film){background:var(--noir);color:var(--papier)}
.cl-sec-film:has(.cl-film) .cl-fiche{border-top-color:rgba(241,236,226,.55)}
.cl-sec-film:has(.cl-film) .cl-fiche dt,.cl-sec-film:has(.cl-film) .cl-fiche dd{border-bottom-color:rgba(241,236,226,.18)}
.cl-sec-film:has(.cl-film) .cl-fiche dt{color:rgba(241,236,226,.62)}
.cl-sec-film:has(.cl-film)+.cl-sec{padding-top:clamp(44px,6vw,88px);border-top:0}
@media (max-width:899px){ .cl-rz-tete.cl-a-film+.cl-sec-film{padding-top:22px} .cl-rz-tete.cl-a-film .cl-tit{padding-block:18px 26px} }
/* relecture v4 du 22/10 : de l'air sous le bloc noir des fiches (le style en ligne « padding-top:0 » l'annulait), plus de titre
   collé à un filet, la page photo montre ses photos dès le premier écran, et la boucle a son bouton pause */
.cl-page .cl-sec-film:has(.cl-film)+.cl-sec{padding-top:clamp(44px,6vw,88px)!important;border-top:0}
.cl-page .cl-sec[style*="padding-top:0"]{border-top:0}
.cl-court{display:grid;gap:22px}
.cl-court-ph{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-court-ph .cl-ph{aspect-ratio:4/5}
@media (min-width:900px){
  .cl-court.cl-court-2{grid-template-columns:1fr .9fr;gap:clamp(32px,4vw,56px);align-items:start}
  .cl-court-ph{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr}
  .cl-court-ph .cl-ph:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
}
.cl-page .cl-boucle-b{position:absolute;right:12px;bottom:12px;z-index:4;min-height:44px;padding:0 14px;background:rgba(20,20,20,.72);color:#fff;border:0;
  font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.08em;cursor:pointer}
.cl-page .cl-boucle-b:hover{background:var(--rouge)}

/* 22/10, bascule : le formulaire Webflow caché qui envoie la fiche de tournage */
#cl-relais{display:none!important}
/* 23/10, audit (C24) : les fiches site, à l'ordinateur comme au téléphone, le titre sur le papier et la capture en dessous */
@media (min-width:900px){
  .cl-rz-tete.cl-rz-site .cl-tit{position:static;background:var(--papier);padding-block:clamp(28px,4vw,48px) 6px}
  .cl-rz-tete.cl-rz-site .cl-tit .cl-blanc{color:var(--noir);text-shadow:none}
  .cl-rz-tete.cl-rz-site+.cl-sec-film{padding-top:22px}
}

/* 23/10, audit (D28, D35) : à l'ordinateur, les galeries des fiches en quatre colonnes, lues ligne par ligne (une grille, plus des
   colonnes de journal) ; une rangée incomplète se partage la largeur (--sp, écrit par le générateur en douzièmes) ; la photo déjà en
   tête de la fiche n'y revient pas (au téléphone, la tête des fiches à film est cachée : la photo y reste) */
@media (min-width:900px){
  .cl-galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;columns:auto;align-items:start}
  .cl-galerie .cl-ph{grid-column:span var(--sp,3);margin:0}
  .cl-galerie .cl-tete-dup{display:none}
}
/* 23/10, audit (D26) : la même couverture sur les 22 films ; sans script, la vidéo hébergée garde les boutons du navigateur */
.cl-page .cl-film .cl-lire,.cl-page .cl-film .cl-ctl,.cl-page .cl-film .cl-barre{display:none}
.cl-page .cl-film.cl-couvert .cl-lire,.cl-page .cl-film[data-yt] .cl-lire{display:inline-flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;white-space:nowrap}
.cl-page .cl-film.cl-couvert.cl-lance .cl-lire{display:none}
.cl-page .cl-film.cl-couvert.cl-lance .cl-ctl{display:flex;gap:6px;position:absolute;right:12px;bottom:14px;z-index:3}
.cl-page .cl-film.cl-couvert.cl-lance .cl-barre{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:rgba(241,236,226,.25)}
.cl-film .cl-barre>span{display:block;height:100%;background:var(--rouge);transform:scaleX(0);transform-origin:0 50%}
.cl-film.cl-couvert video{cursor:pointer}
.cl-page .cl-film .cl-ctl button{min-height:44px;padding:0 12px;background:rgba(20,20,20,.72);color:#fff;border:0;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.08em;cursor:pointer}
.cl-page .cl-film .cl-ctl button:hover{background:var(--rouge)}
.cl-film .cl-son[aria-pressed="false"]{text-decoration:line-through}
.cl-film-bloc{display:grid;gap:10px}
.cl-film-note{color:rgba(241,236,226,.62)}
.cl-film-bloc>.cl-film.cl-v+.cl-film-note{width:100%;max-width:520px;margin-inline:auto}
/* 23/10, audit (D34) : la tête de /photo en quatre images égales, deux par rangée */
@media (min-width:900px){
  .cl-court-ph.cl-quatre{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .cl-court-ph.cl-quatre .cl-ph:first-child{grid-row:auto;aspect-ratio:4/5;height:auto}
}

/* 23/10, demande de Noah : pas de menu « enregistrer l'image » à l'appui long (iPhone), pas de glisser des photos et des films */
.cl-page img,.cl-page video,.cl-page .cl-ph,.cl-page .cl-film,.cl-page a[href*="website-files.com"]{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}

/* 23/10, audit (D45) : au téléphone, APPELER à contour avant DEVIS (essayé de 320 à 430 px de large) ; dans le menu, WhatsApp sous le bouton */
.cl-page .cl-nav .cl-appel{display:inline-flex;align-items:center;min-height:44px;padding:9px 12px;border:1.5px solid var(--noir);font-family:var(--f-mono);
  font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.cl-page .cl-nav .cl-appel:hover{background:var(--noir);color:var(--papier)}
@media (max-width:374px){ .cl-nav .cl-int{gap:10px} .cl-nav-d{gap:6px} .cl-logo img{height:24px}
  .cl-page .cl-nav .cl-appel,.cl-page .cl-nav .cl-devis-tel,.cl-page .cl-burger{padding-inline:8px;letter-spacing:.04em} }
.cl-menu .cl-menu-bas .cl-lien{justify-self:start}
/* 23/10, audit (D45) : sur la fiche de tournage, qui répond, avec la photo au bureau de l'à-propos */
.cl-qui{display:flex;align-items:center;gap:14px;margin-top:10px}
.cl-qui .cl-ph{width:64px;height:64px;flex:none}
/* 23/10, audit (D12 b) : les garanties en petite liste, en texte noir lisible, sous chaque bouton devis */
.cl-garanties{display:grid;gap:6px;font-size:15.5px;line-height:1.35;color:var(--noir)}
.cl-garanties li{display:grid;grid-template-columns:auto 1fr}

/* 23/10, audit (D44) : photo et sites en petit dans la barre, après les autres mots ; la réalisation suivante en carte */
.cl-nav-aussi{display:flex;align-items:baseline;gap:12px}
.cl-liens .cl-petit{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cl-films.cl-suiv{grid-template-columns:minmax(0,360px)}
/* 23/10, audit (D49) : la ligne qui dit quoi et où, sous le titre des cartes entreprises */
.cl-carte .cl-sous{font-size:15px;line-height:1.35;color:#3a3833}
@media (max-width:699px){ .cl-films .cl-carte .cl-sous{font-size:13px} }
/* 23/10, audit (D39, D42) : une ligne de « pour vous. » peut avoir un détail et deux exemples, chacun sur sa ligne */
.cl-liste-x .cl-det br+.cl-lien{margin-top:8px}
/* 23/10, audit (D21 B) : le portrait au bureau garde son grain, environ trois fois plus doux (il abîmait le visage) */
.cl-nb.cl-doux::after{opacity:.17}