:root{
    --cb-cream:#f8f3eb;
    --cb-olive:#3f4b30;
    --cb-terracotta:#c85f31;
    --cb-text:#46523a;
    --cb-line:rgba(200,95,49,.65);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--cb-cream);
    color:var(--cb-text);
}

body{
    font-family:Arial,Helvetica,sans-serif;
}

.cb-page{
    position:fixed;
    inset:0;

    width:100%;
    height:100vh;
    height:100svh;
    height:calc(var(--cb-vh, 1svh) * 100);

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(circle at 15% 15%,rgba(130,95,60,.022),transparent 27%),
        radial-gradient(circle at 85% 80%,rgba(130,95,60,.018),transparent 30%),
        var(--cb-cream);
}

/* =========================================================
   DÉCOR
   ========================================================= */

.cb-decor{
    position:absolute;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}

.cb-branch{
    position:absolute;
    display:block;
    height:auto;
    max-width:none;
    user-select:none;
    will-change:transform,opacity;
}

.cb-orb{
    position:absolute;
    display:block;
    border-radius:50%;
    will-change:transform,opacity;
}

/* Desktop gauche */
.cb-b1{
    left:-3vw;
    top:3vh;
    width:min(28vw,480px);
    --opacity:.96;
    animation:cb-left-in 1.15s .02s cubic-bezier(.20,.75,.24,1) both;
}

.cb-b2{
    left:-11vw;
    bottom:-20vh;
    width:min(24vw,410px);
    --opacity:.09;
    --final-transform:scaleX(-1) rotate(11deg);
    transform:var(--final-transform);
    animation:cb-left-transform-in 1.30s .10s cubic-bezier(.20,.75,.24,1) both;
}

/* Desktop droite */
.cb-b3{
    right:-2vw;
    top:29vh;
    width:min(23vw,390px);
    --opacity:.82;
    --final-transform:scaleX(-1);
    transform:var(--final-transform);
    animation:cb-right-transform-in 1.18s .07s cubic-bezier(.20,.75,.24,1) both;
}

.cb-b4{
    right:-8vw;
    top:-12vh;
    width:min(22vw,370px);
    --opacity:.09;
    animation:cb-right-in 1.30s .12s cubic-bezier(.20,.75,.24,1) both;
}

/* Cercles */
.cb-o1{
    width:min(21vw,360px);
    aspect-ratio:1;
    left:-5vw;
    top:7vh;
    background:#eda27f;
    --opacity:.38;
    animation:cb-orb-in 1.10s 0s cubic-bezier(.20,.75,.24,1) both;
}

.cb-o2{
    width:min(15vw,245px);
    aspect-ratio:1;
    left:-2vw;
    top:16vh;
    background:#bd6d4d;
    --opacity:.38;
    animation:cb-orb-in 1.16s .06s cubic-bezier(.20,.75,.24,1) both;
}

.cb-o3{
    width:min(19vw,320px);
    aspect-ratio:1;
    right:2vw;
    top:10vh;
    background:#efd0be;
    --opacity:.25;
    animation:cb-orb-in 1.18s .02s cubic-bezier(.20,.75,.24,1) both;
}

.cb-o4{
    width:min(11vw,185px);
    aspect-ratio:1;
    right:2vw;
    top:51vh;
    background:#cf764b;
    --opacity:.38;
    animation:cb-orb-in 1.18s .12s cubic-bezier(.20,.75,.24,1) both;
}

.cb-o5{
    width:min(18vw,300px);
    aspect-ratio:1;
    right:-1vw;
    bottom:-8vh;
    background:#efc4ae;
    --opacity:.17;
    animation:cb-orb-in 1.22s .18s cubic-bezier(.20,.75,.24,1) both;
}

/* =========================================================
   CONTENU DESKTOP
   ========================================================= */

.cb-shell{
    width:min(980px,64vw);
    max-height:100svh;

    padding:10px 20px 14px;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
    position:relative;
    z-index:2;
}

.cb-logo{
    width:clamp(215px,19vw,310px);
    margin:0 0 5px;
    animation:cb-logo-in .72s .40s cubic-bezier(.20,.75,.24,1) both;
}

.cb-logo img{
    display:block;
    width:100%;
    height:auto;
}

.cb-old{
    font-family:Didot,"Bodoni 72","Times New Roman",serif;
    font-size:clamp(28px,2.7vw,44px);
    line-height:1.05;
    letter-spacing:.22em;
    color:var(--cb-olive);
    animation:cb-rise .62s .58s ease-out both;
}

.cb-becomes{
    margin:2px 0 6px;

    font-size:clamp(17px,1.55vw,25px);
    letter-spacing:.32em;

    color:var(--cb-terracotta);
    animation:cb-rise .62s .69s ease-out both;
}

.cb-new{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin:0;

    animation:cb-rise .72s .80s ease-out both;
}

.cb-carte{
    font-family:Didot,"Bodoni 72","Times New Roman",serif;
    font-size:clamp(58px,5.3vw,88px);
    line-height:.86;
    font-weight:400;

    color:var(--cb-olive);
}

.cb-blanche{
    display:block;

    width:clamp(245px,23vw,390px);
    height:auto;
}

.cb-tagline{
    margin:7px 0 4px;

    font-family:Didot,"Bodoni 72","Times New Roman",serif;
    font-size:clamp(23px,2.05vw,34px);
    line-height:1.05;

    color:var(--cb-olive);

    animation:cb-rise .62s .94s ease-out both;
}

.cb-sprig{
    width:clamp(38px,2.8vw,54px);
    height:auto;

    margin:4px 0 6px;

    animation:cb-rise .62s 1.04s ease-out both;
}

.cb-copy{
    max-width:790px;

    margin:0;

    font-size:clamp(14px,1.06vw,18px);
    line-height:1.34;

    animation:cb-rise .62s 1.14s ease-out both;
}

.cb-opening{
    margin-top:10px;

    font-size:clamp(17px,1.4vw,23px);
    letter-spacing:.18em;

    color:var(--cb-terracotta);

    animation:cb-rise .62s 1.26s ease-out both;
}

.cb-when{
    margin:4px 0 0;

    font-family:Didot,"Bodoni 72","Times New Roman",serif;
    font-size:clamp(17px,1.42vw,23px);
    line-height:1.16;

    animation:cb-rise .62s 1.37s ease-out both;
}

.cb-meta{
    width:min(860px,100%);

    margin-top:13px;

    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;

    font-size:clamp(13px,.95vw,16px);
    line-height:1.20;

    animation:cb-rise .62s 1.48s ease-out both;
}

.cb-meta > div{
    min-height:42px;
    padding:0 24px;

    display:grid;
    place-items:center;
}

.cb-meta > div + div{
    border-left:1px solid var(--cb-line);
}

.cb-meta a{
    color:inherit;
    text-decoration:none;
}

/* =========================================================
   ANIMATIONS
   Les décors viennent de droite vers leur position finale.
   ========================================================= */

@keyframes cb-left-in{
    from{
        opacity:0;
        transform:translateX(90px);
    }
    to{
        opacity:var(--opacity);
        transform:translateX(0);
    }
}

@keyframes cb-right-in{
    from{
        opacity:0;
        transform:translateX(90px);
    }
    to{
        opacity:var(--opacity);
        transform:translateX(0);
    }
}

@keyframes cb-left-transform-in{
    from{
        opacity:0;
        transform:translateX(90px) scaleX(-1) rotate(11deg);
    }
    to{
        opacity:var(--opacity);
        transform:var(--final-transform);
    }
}

@keyframes cb-right-transform-in{
    from{
        opacity:0;
        transform:translateX(90px) scaleX(-1);
    }
    to{
        opacity:var(--opacity);
        transform:var(--final-transform);
    }
}

@keyframes cb-orb-in{
    from{
        opacity:0;
        transform:translateX(100px) scale(.96);
    }
    to{
        opacity:var(--opacity);
        transform:translateX(0) scale(1);
    }
}

@keyframes cb-logo-in{
    from{
        opacity:0;
        transform:translateY(8px) scale(.97);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes cb-rise{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width:900px) and (min-width:621px){

    .cb-shell{
        width:min(760px,86vw);
        padding:10px 16px 12px;
    }

    .cb-b1{
        left:-10vw;
        top:7vh;
        width:35vw;
    }

    .cb-b2{
        left:-18vw;
        bottom:-12vh;
        width:32vw;
    }

    .cb-b3{
        right:-8vw;
        top:34vh;
        width:30vw;
    }

    .cb-b4{
        right:-10vw;
        top:-3vh;
        width:30vw;
    }
}

/* =========================================================
   TÉLÉPHONE
   Pas de scale JS.
   Tout le contenu est réellement dimensionné pour 100svh.
   ========================================================= */

@media (max-width:620px){

    .cb-page{
        align-items:stretch;
        justify-content:flex-start;
    }

    .cb-shell{
        width:100%;
        height:100vh;
        height:100svh;
        max-height:none;

        padding:
            max(8px,env(safe-area-inset-top))
            20px
            max(10px,env(safe-area-inset-bottom));

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:clamp(3px,.65svh,7px);
    }

    .cb-logo{
        width:min(49vw,190px);
        margin:0;
    }

    .cb-old{
        font-size:clamp(23px,7vw,30px);
        line-height:1;
        letter-spacing:.16em;
    }

    .cb-becomes{
        margin:0;

        font-size:clamp(14px,4.35vw,18px);
        line-height:1;
        letter-spacing:.24em;
    }

    .cb-new{
        display:block;
        margin:0;
    }

    .cb-carte{
        display:block;

        font-size:clamp(47px,14vw,60px);
        line-height:.80;
    }

    .cb-blanche{
        width:min(68vw,260px);
        height:auto;

        margin:2px auto 0;
    }

    .cb-tagline{
        margin:0;

        max-width:94%;

        font-size:clamp(19px,5.55vw,24px);
        line-height:1.08;
    }

    .cb-sprig{
        width:34px;
        margin:1px 0;
    }

    .cb-copy{
        max-width:92%;

        margin:0;

        font-size:clamp(12.5px,3.65vw,15px);
        line-height:1.27;
    }

    .cb-opening{
        margin:3px 0 0;

        font-size:clamp(14px,4.25vw,18px);
        line-height:1.1;
        letter-spacing:.11em;
    }

    .cb-when{
        max-width:93%;

        margin:0;

        font-size:clamp(14px,4.15vw,18px);
        line-height:1.18;
    }

    .cb-meta{
        width:100%;

        margin:3px 0 0;

        display:grid;
        grid-template-columns:1fr;
        gap:2px;

        font-size:clamp(12px,3.55vw,15px);
        line-height:1.12;
    }

    .cb-meta > div{
        min-height:0;
        padding:1px 0;
    }

    .cb-meta > div + div{
        border-left:0;
    }

    .cb-meta > div + div::before{
        content:"";

        display:block;

        width:34px;
        height:1px;

        margin:0 auto 4px;

        background:var(--cb-line);
    }

    .cb-desktop-break{
        display:none;
    }

    /* Décor mobile : volontairement périphérique */
    .cb-b1{
        left:-35vw;
        top:6vh;

        width:68vw;

        --opacity:.40;
    }

    .cb-b2{
        left:-36vw;
        bottom:-18vh;

        width:56vw;

        --opacity:.055;
    }

    .cb-b3{
        right:-32vw;
        top:55vh;

        width:60vw;

        --opacity:.30;
    }

    .cb-b4{
        right:-29vw;
        top:-4vh;

        width:52vw;

        --opacity:.055;
    }

    .cb-o1{
        left:-27vw;
        top:4vh;

        width:46vw;

        --opacity:.14;
    }

    .cb-o2{
        left:-21vw;
        top:13vh;

        width:32vw;

        --opacity:.13;
    }

    .cb-o3{
        right:-24vw;
        top:6vh;

        width:40vw;

        --opacity:.07;
    }

    .cb-o4{
        right:-17vw;
        top:54vh;

        width:26vw;

        --opacity:.11;
    }

    .cb-o5{
        right:-20vw;
        bottom:-8vh;

        width:40vw;

        --opacity:.07;
    }
}

/* Téléphones bas / petits */
@media (max-width:620px) and (max-height:760px){

    .cb-shell{
        padding-top:7px;
        padding-bottom:7px;

        gap:2px;
    }

    .cb-logo{
        width:min(42vw,155px);
    }

    .cb-old{
        font-size:21px;
    }

    .cb-becomes{
        font-size:13px;
    }

    .cb-carte{
        font-size:42px;
    }

    .cb-blanche{
        width:min(57vw,215px);
    }

    .cb-tagline{
        font-size:18px;
    }

    .cb-sprig{
        width:28px;
    }

    .cb-copy{
        font-size:11.5px;
        line-height:1.22;
    }

    .cb-opening{
        font-size:13px;
    }

    .cb-when{
        font-size:13px;
        line-height:1.15;
    }

    .cb-meta{
        font-size:11.5px;
        line-height:1.08;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
    }
}
/* === CB VISUAL TARGET 2026-10-01 === */
/* Desktop/tablette paysage = référence large ; téléphone/tablette portrait = référence verticale. */
@media (min-width:821px){
  .cb-shell{width:min(1060px,65vw);padding:8px 18px 12px}
  .cb-logo{width:clamp(245px,20vw,340px);margin-bottom:7px}
  .cb-old{font-size:clamp(34px,2.75vw,46px);letter-spacing:.22em}
  .cb-becomes{font-size:clamp(18px,1.5vw,25px);margin:2px 0 8px}
  .cb-new{gap:clamp(10px,1vw,18px)}
  .cb-carte{font-size:clamp(68px,5.4vw,92px)}
  .cb-blanche{width:clamp(285px,24vw,405px)}
  .cb-tagline{font-size:clamp(25px,2.05vw,35px);margin:7px 0 5px}
  .cb-sprig{width:clamp(42px,3vw,58px);margin:4px 0 7px}
  .cb-copy{font-size:clamp(15px,1.08vw,19px);line-height:1.35}
  .cb-opening{font-size:clamp(18px,1.38vw,23px);margin-top:11px}
  .cb-when{font-size:clamp(18px,1.42vw,24px);line-height:1.15}
  .cb-meta{width:min(900px,100%);margin-top:15px;font-size:clamp(13px,.98vw,16px)}
  .cb-b1{left:-3.5vw;top:1vh;width:min(31vw,535px);--opacity:.97}
  .cb-b2{left:-8vw;bottom:-16vh;width:min(24vw,420px);--opacity:.10}
  .cb-b3{right:-2.5vw;top:30vh;width:min(25vw,430px);--opacity:.84}
  .cb-b4{right:-7vw;top:-10vh;width:min(24vw,410px);--opacity:.10}
  .cb-o1{left:-5vw;top:7vh;width:min(23vw,390px);--opacity:.42}
  .cb-o2{left:-2vw;top:16vh;width:min(16vw,270px);--opacity:.42}
  .cb-o3{right:1vw;top:12vh;width:min(21vw,350px);--opacity:.28}
  .cb-o4{right:2vw;top:52vh;width:min(11vw,185px);--opacity:.40}
  .cb-o5{right:-1vw;bottom:-9vh;width:min(19vw,320px);--opacity:.19}
}
@media (max-width:820px){
  .cb-page{align-items:stretch;justify-content:flex-start}
  .cb-shell{width:100%;height:100vh;height:100svh;height:calc(var(--cb-vh,1svh)*100);max-height:none;padding:max(12px,2.3svh) 18px max(10px,2svh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.55svh,6px)}
  .cb-logo{width:min(55vw,235px);margin:0 0 clamp(2px,.55svh,6px)}
  .cb-old{font-size:clamp(24px,6.6vw,34px);line-height:1;letter-spacing:.18em}
  .cb-becomes{font-size:clamp(14px,3.8vw,18px);line-height:1;letter-spacing:.25em;margin:0 0 2px}
  .cb-new{display:block;margin:0}
  .cb-carte{display:block;font-size:clamp(50px,13.6vw,74px);line-height:.80}
  .cb-blanche{width:min(66vw,280px);margin:0 auto;height:auto}
  .cb-tagline{max-width:95%;margin:0;font-size:clamp(19px,5.1vw,27px);line-height:1.06}
  .cb-sprig{width:clamp(29px,7.4vw,38px);margin:0}
  .cb-copy{max-width:92%;margin:0;font-size:clamp(12px,3.25vw,15px);line-height:1.24}
  .cb-opening{margin:2px 0 0;font-size:clamp(13.5px,3.8vw,18px);line-height:1.1;letter-spacing:.12em}
  .cb-when{max-width:92%;margin:0;font-size:clamp(13.5px,3.8vw,18px);line-height:1.15}
  .cb-meta{width:100%;margin:3px 0 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;font-size:clamp(10px,2.6vw,13px);line-height:1.08}
  .cb-meta>div{min-height:38px;padding:0 8px;display:grid;place-items:center}
  .cb-meta>div+div{border-left:1px solid var(--cb-line)}
  .cb-meta>div+div::before{display:none}
  .cb-desktop-break{display:none}
  .cb-b1{left:-34vw;top:0;width:68vw;--opacity:.58}
  .cb-b2{left:-31vw;bottom:-16vh;width:57vw;--opacity:.24}
  .cb-b3{right:-29vw;top:auto;bottom:-12vh;width:61vw;--opacity:.50}
  .cb-b4{right:-24vw;top:-6vh;width:50vw;--opacity:.11}
  .cb-o1{left:-23vw;top:1vh;width:47vw;--opacity:.21}
  .cb-o2{left:-20vw;top:auto;bottom:-8vh;width:42vw;--opacity:.16}
  .cb-o3{right:-18vw;top:8vh;width:41vw;--opacity:.09}
  .cb-o4{right:-14vw;top:auto;bottom:4vh;width:23vw;--opacity:.17}
  .cb-o5{right:-21vw;top:auto;bottom:-8vh;width:42vw;--opacity:.10}
}
@media (max-width:430px) and (max-height:760px){
  .cb-shell{padding-top:8px;padding-bottom:8px;gap:1px}
  .cb-logo{width:min(43vw,158px)}
  .cb-old{font-size:20px}.cb-becomes{font-size:12.5px}
  .cb-carte{font-size:41px}.cb-blanche{width:min(56vw,210px)}
  .cb-tagline{font-size:17px}.cb-sprig{width:27px}
  .cb-copy{font-size:11px;line-height:1.18}.cb-opening{font-size:12.5px}.cb-when{font-size:12.5px;line-height:1.12}
  .cb-meta{font-size:9.5px}.cb-meta>div{min-height:31px;padding:0 4px}
}