/* ==========================================================================
   Film d'accueil « Là où les idées deviennent logiciels ».
   Conçu dans Claude Design (projet codexalia-film), intégré ici tel quel.

   Toutes les règles sont préfixées par .cx-film : le film emploie des noms de
   classes génériques (.carte, .plan, .app, .sec…) qui ne doivent ni subir ni
   influencer Bootstrap et style.css. Ses boutons s'appellent .cx-btn, et non
   .btn, pour ne pas hériter des boutons de Bootstrap.
   Les unités cqw / cqh sont relatives au film lui-même (container-type: size) :
   il se compose tout seul, quelle que soit la taille du cadre qu'on lui donne.
   ========================================================================== */

/* ---------- Cadre : c'est la page qui fixe la taille du film ---------- */
.film-cadre { aspect-ratio: 16 / 9; max-width: 75rem; margin-inline: auto; }
@media (max-width: 640px) { .film-cadre { aspect-ratio: 9 / 16; } }

/* ---------- Le film ---------- */
.cx-film{
  --encre:#16161a;--encre2:#23232a;--papier:#f7f3e8;--papier2:#efe9d8;--or:#c9a227;--or2:#e2c56a;
  --sec:rgba(247,243,232,.62);--sec-ink:rgba(22,22,26,.6);
  --ease:cubic-bezier(0.22,1,0.36,1);--d:.9s;
  --titre:'Montserrat',system-ui,sans-serif;--serif:'Libre Baskerville',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box;
  container-type:size;background:var(--encre);color:var(--papier);font-family:var(--titre);
  border-radius:18px;line-height:normal;text-align:left;
}
.cx-film *,.cx-film *::before,.cx-film *::after{box-sizing:border-box}
.cx-film::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60cqw 60cqw at 100% 0%,rgba(201,162,39,.16),transparent 70%)}
.cx-film a{color:var(--or2)}.cx-film a:hover{color:var(--papier)}

/* états : off (caché) / on / dim (éteint à ~20 %) */
.cx-film [data-anim]{opacity:0;transform:translateY(14px);transition:opacity var(--d) var(--ease),transform var(--d) var(--ease)}
.cx-film [data-anim][data-etat="on"]{opacity:1;transform:none}
.cx-film [data-anim][data-etat="dim"]{opacity:.2;transform:none}
.cx-film.saut *,.cx-film.statique *{transition:none!important;animation:none!important}
.cx-film.statique .cmd{display:none}
.cx-film .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marque */
.cx-film .marque{position:absolute;top:4cqh;left:6cqw;display:flex;align-items:center;gap:.6cqw;font-weight:700;font-size:clamp(14px,1.2cqw,17px);letter-spacing:-.02em}
.cx-film .marque svg{width:clamp(22px,2.2cqw,30px);height:auto}
.cx-film .marque b{color:var(--or);font-weight:700}

/* en-tête : une idée par écran */
.cx-film .tete{position:absolute;left:6cqw;right:6cqw;top:8cqh;display:grid;text-align:center}
.cx-film .tete > div{grid-area:1/1}
.cx-film .tete h2{margin:0;font-weight:850;font-size:clamp(18px,3.3cqw,50px);letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.cx-film .tete p{margin:.8em 0 0;font-size:clamp(14px,1.25cqw,19px);color:var(--sec);font-weight:500}

/* plein écran : ouverture et fin */
.cx-film .plein{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 6cqw;pointer-events:none}
.cx-film .slogan{margin:0;font-weight:850;font-size:clamp(22px,4.6cqw,72px);letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.cx-film .slogan em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--or2);letter-spacing:0}
.cx-film .code{margin:1.2em 0 0;font-family:var(--mono);font-size:clamp(14px,1.3cqw,20px);color:var(--sec)}
.cx-film .code b{color:var(--or2);font-weight:400}
.cx-film .fin-logo{width:clamp(56px,7cqw,104px);height:auto;margin:0 auto 2.2cqh;display:block}
.cx-film .fin-actions{display:flex;gap:1.2cqw;justify-content:center;flex-wrap:wrap;margin-top:3.4cqh;pointer-events:auto}
.cx-film .cx-btn{font:700 clamp(14px,1.2cqw,17px) var(--titre);border-radius:999px;padding:.95em 1.7em;cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.cx-film .cx-btn:hover{transform:translateY(-2px)}
.cx-film .cx-btn:focus-visible,.cx-film .cmd button:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.cx-film .cx-btn-or{background:var(--or);color:var(--encre);border:1px solid var(--or)}
.cx-film .cx-btn-or:hover{color:var(--encre)}
.cx-film .cx-btn-discret{background:transparent;color:var(--papier);border:1px solid rgba(247,243,232,.28)}

/* corps : blocs à gauche, interface à droite */
.cx-film .corps{position:absolute;left:6cqw;right:6cqw;top:25cqh;bottom:14.5cqh;display:grid;grid-template-columns:34cqw 1fr;gap:4cqw;transition:opacity 1.4s var(--ease)}
.cx-film .corps[data-etat="dim"]{opacity:.2}
.cx-film .gauche{display:flex;flex-direction:column;gap:1cqh;min-height:0}
.cx-film .droite{position:relative;min-height:0}

/* carte papier */
.cx-film .carte{background:var(--papier);color:var(--encre);border-radius:14px;padding:1.1cqw 1.5cqw;flex:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transform-origin:50% 50%}
.cx-film .carte[data-etat="centre"]{opacity:1;transform:translate(27cqw,6cqh) scale(1.15)}
.cx-film .carte small{display:block;font:500 clamp(14px,1cqw,15px) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sec-ink);margin-bottom:.7em}
.cx-film .carte p{margin:0;font-size:clamp(14px,1.15cqw,18px);font-weight:500;line-height:1.35;min-height:0}
.cx-film .carte[data-etat="centre"] p{font-size:clamp(14px,1.3cqw,20px)}
.cx-film .mot{transition:background-color .7s var(--ease),box-shadow .7s var(--ease);border-radius:3px;padding:0 .1em;margin:0 -.1em}
.cx-film .mot.or{background:rgba(201,162,39,.28);box-shadow:inset 0 -2px 0 var(--or);font-weight:700}
.cx-film .curseur{display:inline-block;width:2px;height:1em;background:var(--or);vertical-align:-.15em;margin-left:1px;transition:opacity .3s}
.cx-film .curseur[data-etat="off"]{opacity:0}

/* blocs */
.cx-film .blocs{display:flex;flex-direction:column;gap:.55cqh;margin:0;padding:0;list-style:none}
.cx-film .bloc{position:relative;display:flex;align-items:center;gap:1cqw;padding:.45cqh 1.2cqw;min-height:28px;border-radius:10px;background:var(--encre2);border:1px solid rgba(247,243,232,.1);font-weight:600;font-size:clamp(14px,1.2cqw,18px);color:var(--papier);transition:opacity var(--d) var(--ease),transform var(--d) var(--ease),color var(--d) var(--ease)}
.cx-film .bloc::after{content:"";position:absolute;inset:-1px;border-radius:10px;border:1px solid var(--or);box-shadow:0 0 24px -6px rgba(201,162,39,.55);opacity:0;transition:opacity var(--d) var(--ease)}
.cx-film .bloc i{font:500 clamp(14px,.95cqw,14px) var(--mono);font-style:normal;color:var(--sec);min-width:2ch}
.cx-film .bloc[data-etat="on"]{color:var(--or2)}.cx-film .bloc[data-etat="on"]::after{opacity:1}.cx-film .bloc[data-etat="on"] i{color:var(--or)}

/* plan de livraison */
.cx-film .plan{display:flex;align-items:center;margin-top:auto;padding:.4cqh 0 0;flex:none;font:500 14px var(--mono);color:var(--sec);letter-spacing:0}
.cx-film .plan span{display:flex;align-items:center;gap:.5cqw;white-space:nowrap}
.cx-film .plan span::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--or);background:var(--encre);flex:none;transition:background-color .6s var(--ease)}
.cx-film .plan span[data-etat="on"]{color:var(--or2)}.cx-film .plan span[data-etat="on"]::before{background:var(--or)}
/* opacity:1 : Bootstrap éclaircit tous les <hr> à 25 % */
.cx-film .plan hr{flex:1 1 0;min-width:6px;border:0;border-top:1px solid rgba(247,243,232,.14);margin:0 .5cqw;opacity:1}

/* interface qui se construit */
.cx-film .app{position:absolute;inset:0;background:var(--papier);color:var(--encre);border-radius:16px;padding:1.4cqw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:1cqw;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.cx-film .adresse{grid-column:1/-1;display:flex;align-items:center;gap:.8cqw;background:var(--papier2);border-radius:999px;padding:.55cqw 1.1cqw;font:500 clamp(14px,1cqw,15px) var(--mono);color:var(--encre)}
.cx-film .adresse svg{width:14px;height:14px;flex:none}
.cx-film .adresse .url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-film .enligne{display:flex;align-items:center;gap:.5cqw;color:var(--encre);font-weight:600;white-space:nowrap}
.cx-film .enligne::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--or);box-shadow:0 0 0 0 rgba(201,162,39,.5);animation:cx-pouls 2.6s var(--ease) infinite}
@keyframes cx-pouls{0%{transform:scale(.85);opacity:.7}50%{transform:scale(1.15);opacity:1}100%{transform:scale(.85);opacity:.7}}
.cx-film .sec{background:var(--papier2);border-radius:10px;padding:1cqw 1.1cqw;display:flex;flex-direction:column;gap:.7cqh;min-height:0}
.cx-film .sec h3{margin:0;font:500 clamp(14px,.95cqw,14px) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sec-ink)}
.cx-film .sec-cal{grid-row:2}.cx-film .sec-pay{grid-row:2}.cx-film .sec-mail{grid-column:1/-1;grid-row:3}
.cx-film .tuiles{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;flex:1;align-content:start}
.cx-film .tuiles b{aspect-ratio:1.15;border-radius:3px;background:rgba(22,22,26,.07)}
.cx-film .tuiles b.or{background:var(--or)}
.cx-film .sec p{margin:0;font-size:clamp(14px,1.05cqw,16px);line-height:1.35}
.cx-film .sec p.legende{color:var(--sec-ink);font-weight:500}
.cx-film .montant{font-weight:800;font-size:clamp(18px,2cqw,32px);letter-spacing:-.03em;margin:auto 0 0}
.cx-film .cx-btn-mini{align-self:flex-start;background:var(--or);color:var(--encre);border-radius:999px;padding:.55em 1.2em;font:700 clamp(14px,1cqw,15px) var(--titre)}
.cx-film .mail{display:flex;gap:.9cqw;align-items:flex-start}
.cx-film .mail svg{width:20px;height:20px;flex:none;margin-top:.15em}
.cx-film .mail strong{display:block;font-weight:700}
/* téléphone */
.cx-film .tel{position:absolute;right:-2.5cqw;bottom:-3cqh;width:9.8cqw;aspect-ratio:9/18.6;background:var(--papier);border:3px solid var(--encre2);border-radius:2.2cqw;padding:1cqw .7cqw;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:.8cqh;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.cx-film .tel[data-etat="off"],.cx-film .tel:not([data-etat]){transform:translateY(24px) rotate(-8deg)}
.cx-film .tel[data-etat="on"],.cx-film .tel[data-etat="dim"]{transform:rotate(-4deg)}
.cx-film .tel u{display:block;height:5px;width:40%;margin:0 auto;border-radius:3px;background:var(--encre2)}
.cx-film .tel .tuiles{flex:0}.cx-film .tel .tuiles b{border-radius:2px}
.cx-film .tel s{display:block;text-decoration:none;height:1.8cqw;border-radius:999px;background:var(--or);margin-top:auto}

/* fils dorés */
.cx-film .fils{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cx-film .fils path{fill:none;stroke:var(--or);stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity var(--d) var(--ease)}
.cx-film .fils path[data-etat="on"]{opacity:1}.cx-film .fils path[data-etat="dim"]{opacity:.2}

/* commandes */
.cx-film .cmd{position:absolute;left:6cqw;right:6cqw;bottom:3.4cqh;display:flex;align-items:center;gap:.6cqw;opacity:.55;transition:opacity .4s}
.cx-film .cmd:hover,.cx-film .cmd:focus-within{opacity:1}
.cx-film .cmd button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,243,232,.18);background:transparent;color:var(--papier);cursor:pointer;display:grid;place-items:center;padding:0}
.cx-film .cmd button svg{width:16px;height:16px;fill:currentColor}
.cx-film .cmd button svg[hidden]{display:none}
.cx-film .cmd time{margin-left:.6cqw;font:500 14px var(--mono);color:var(--sec);letter-spacing:.04em}
.cx-film .barre{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(247,243,232,.08)}
.cx-film .barre i{position:absolute;inset:0;background:var(--or);transform-origin:0 50%;transform:scaleX(0)}

/* composition verticale */
@container (max-width:640px){
  .cx-film{border-radius:12px}
  .cx-film .tete{top:7cqh}
  .cx-film .tete h2{font-size:clamp(20px,7cqw,30px)}
  .cx-film .tete p{font-size:14px;margin-top:.5em}
  .cx-film .corps{top:19cqh;bottom:10cqh;grid-template-columns:1fr;grid-template-rows:minmax(0,auto) minmax(42%,1fr);gap:2cqh}
  .cx-film .gauche{gap:8px}
  .cx-film .carte[data-etat="centre"]{transform:translateY(6cqh) scale(1)}
  .cx-film .carte{padding:10px 12px}.cx-film .carte small{margin-bottom:.4em}
  .cx-film .carte p{min-height:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cx-film .carte[data-etat="centre"] p{-webkit-line-clamp:5}
  .cx-film .blocs{gap:4px}.cx-film .bloc{padding:4px 10px;gap:8px;font-size:14px;min-height:26px}
  .cx-film .plan{display:none}
  .cx-film .tel{display:none}
  .cx-film .app{padding:8px;gap:6px;grid-template-rows:auto minmax(0,1fr) auto}
  .cx-film .sec{padding:8px 10px;gap:4px}.cx-film .sec-mail{display:none}.cx-film .tuiles{display:none}
  .cx-film .montant{font-size:20px;margin:0}.cx-film .cx-btn-mini{padding:.35em 1em}
  .cx-film .adresse{padding:6px 12px;gap:8px}
  .cx-film .cmd{gap:8px;bottom:2.5cqh}.cx-film .cmd button{width:44px;height:44px}
  .cx-film .fin-actions{gap:10px}
  .cx-film .slogan{font-size:clamp(24px,8.5cqw,40px)}.cx-film .code{font-size:14px}
  .cx-film .marque{top:2.2cqh}
}