/* CocoGames — annonce de fermeture. Feuille commune aux 3 pages. */
:root{
  --paper:#f7f6f3;
  --paper-2:#eceae4;
  --ink:#14171c;
  --ink-soft:#5c6169;
  --line:#dcd8d0;
  --tim-navy:#16295e;     /* charte Tahiti Informatique et Multimédia */
  --tim-green:#1ea850;
  --tim-wash:#eef4fb;
  --ww-ink:#16181d;       /* charte WinWin */
  --ww-wash:#ecedf0;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(20,23,28,.05),0 14px 36px -14px rgba(20,23,28,.2);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding:0 clamp(1rem,4vw,3rem);
}
.wrap{max-width:74rem;margin:0 auto}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:600;letter-spacing:-.022em;line-height:1.08;margin:0}
a{color:inherit}
.eyebrow{margin:0 0 .75rem;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- en-tête d'annonce ---------- */
.masthead{padding:clamp(2rem,6vw,4.25rem) 0 clamp(1.4rem,3.5vw,2.25rem);max-width:54rem}
.masthead__logo{width:clamp(42px,6vw,58px);height:auto;margin-bottom:1.15rem}
.masthead h1{font-size:clamp(1.55rem,4.4vw,3rem);text-wrap:balance}
.masthead h1 .closed{color:#b4332a}
.hint{
  display:inline-flex;align-items:center;gap:.5rem;margin:1.5rem 0 0;
  padding:.5rem .9rem .5rem .75rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(20,23,28,.06);
  font-size:.83rem;font-weight:600;color:var(--ink);
}
.hint__dot{width:8px;height:8px;border-radius:50%;background:var(--tim-green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
.masthead p{margin:1rem 0 0;max-width:46ch;font-size:clamp(.95rem,1.7vw,1.08rem);color:var(--ink-soft);text-wrap:pretty}

/* ---------- le rectangle 2/3 – 1/3 ---------- */
.rect{
  display:grid;grid-template-columns:2fr 1fr;
  aspect-ratio:16/7;min-height:360px;
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2);
}
.panel{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;text-decoration:none;color:var(--ink);cursor:pointer;transition:box-shadow .35s var(--ease)}
.panel:hover,.panel:focus-visible{box-shadow:inset 0 0 0 3px rgba(30,168,80,.55)}
.panel--ww:hover,.panel--ww:focus-visible{box-shadow:inset 0 0 0 3px rgba(201,204,212,.6)}
/* la photo de la salle est reconstituée en continu d'un panneau à l'autre :
   chaque panneau porte l'image entière, ancrée sur son propre bord */
/* Chaque panneau porte son propre univers, pas la photo de la salle fermée :
   la salle ne raconte plus ce qu'on y fait aujourd'hui.
   Pour passer à une vraie photo : remplacer le `background` par
   url("assets/tim-panel.jpg") center/cover no-repeat. */
.panel__shot{
  position:absolute;inset:0;z-index:-2;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.panel--tim .panel__shot{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' fill='none' stroke-width='2'%3E%3Cpath d='M0 48h68l32-32h130' stroke='%231ea850' stroke-opacity='.3'/%3E%3Cpath d='M230 112h-64l-32 32H0' stroke='%2316295e' stroke-opacity='.2'/%3E%3Cpath d='M0 178h40l38 52h152' stroke='%231ea850' stroke-opacity='.22'/%3E%3Ccircle cx='68' cy='48' r='7' stroke='%231ea850' stroke-opacity='.34'/%3E%3Ccircle cx='166' cy='112' r='7' stroke='%2316295e' stroke-opacity='.24'/%3E%3C/svg%3E") repeat,
    linear-gradient(145deg,#ffffff 0%,#f0f5fb 55%,#e8f2ec 100%);
  opacity:1;
}
.panel--ww .panel__shot{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='%23c9ccd4' stroke-width='1.6'%3E%3Cpath d='M0 140l42-34 43 19 42-58 43 21'/%3E%3Cpath d='M0 74l42-16 43 28 42-46 43 18' opacity='.45'/%3E%3C/svg%3E") repeat,
    linear-gradient(150deg,#24272e 0%,#16181d 60%,#0f1114 100%);
  opacity:1;
}
/* dégradé de lisibilité sous le texte, dans la couleur du panneau */
.panel__veil{position:absolute;inset:0;z-index:-1}
.panel--tim .panel__veil{background:linear-gradient(to top,rgba(255,255,255,.96) 20%,rgba(255,255,255,.72) 55%,transparent)}
.panel--ww .panel__veil{background:linear-gradient(to top,rgba(15,17,20,.94) 20%,rgba(15,17,20,.66) 58%,transparent)}
.panel--ww{border-left:1px solid rgba(255,255,255,.14)}

.panel__open{
  position:absolute;top:clamp(.9rem,1.8vw,1.35rem);right:clamp(.9rem,1.8vw,1.35rem);z-index:2;
  width:clamp(38px,3.4vw,46px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:#fff;box-shadow:0 3px 14px rgba(20,23,28,.22);
  transition:background .3s var(--ease),transform .3s var(--ease),color .3s var(--ease);
}
.panel--tim .panel__open{color:var(--tim-navy)}
.panel--ww .panel__open{color:var(--ww-ink)}
.panel:hover .panel__open,.panel:focus-visible .panel__open{transform:scale(1.12) translateX(2px);color:#fff}
.panel--tim:hover .panel__open,.panel--tim:focus-visible .panel__open{background:var(--tim-green)}
.panel--ww:hover .panel__open,.panel--ww:focus-visible .panel__open{background:#454b55}
.panel__body{position:relative;width:100%;padding:clamp(1.05rem,2.1vw,1.9rem)}
.panel__tag{
  display:inline-block;padding:.32rem .7rem;border-radius:999px;
  background:#fff;box-shadow:0 2px 10px rgba(20,23,28,.18);
  font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.panel--tim .panel__tag{color:var(--tim-navy)}
.panel--ww .panel__tag{color:var(--ww-ink)}

/* ce qui n'apparaît qu'au survol */
.panel__reveal{display:block;margin-top:.9rem;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.panel__logo{display:block;width:auto;margin-bottom:.65rem}
.panel--tim .panel__logo{height:clamp(52px,6vw,78px);mix-blend-mode:multiply}
.panel--ww .panel__logo{height:clamp(56px,6.2vw,82px)}
.panel__name{display:block;font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:700;letter-spacing:-.022em;line-height:1.08;font-size:clamp(1.05rem,2vw,1.6rem);text-wrap:balance}
.panel--tim .panel__name{color:var(--tim-navy)}
.panel--tim .panel__name .g{color:var(--tim-green)}
.panel--ww .panel__name{color:#fff}
.panel__what{display:block;margin:.42rem 0 .9rem;max-width:36ch;font-size:clamp(.82rem,1.25vw,.95rem);line-height:1.5}
.panel--tim .panel__what{color:#3b4049}
.panel--ww .panel__what{color:#c9ccd4}
.panel__cta{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700}
.panel--tim .panel__cta{color:var(--tim-green)}
.panel--ww .panel__cta{color:#fff}
.panel__cta svg{transition:transform .35s var(--ease)}

.panel:hover .panel__shot,.panel:focus-visible .panel__shot{transform:scale(1.06)}
.panel:hover .panel__reveal,.panel:focus-visible .panel__reveal{opacity:1;transform:none}
.panel:hover .panel__cta svg,.panel:focus-visible .panel__cta svg{transform:translateX(4px)}
.panel:focus-visible{outline:3px solid var(--tim-navy);outline-offset:-5px}

/* sans survol possible (tactile) : tout est visible d'emblée */
@media (hover:none){
  .panel__reveal{opacity:1;transform:none}
}

/* ---------- pages de détail ---------- */
.hero{padding:clamp(1.4rem,3.5vw,2.5rem) 0 clamp(1.4rem,3vw,2.1rem);border-bottom:1px solid var(--line)}
.hero__logo{width:auto;display:block;margin-bottom:1.1rem}
.page--tim .hero__logo{height:clamp(84px,10vw,120px);mix-blend-mode:multiply}
.page--ww .hero__logo{height:clamp(96px,11vw,132px);padding:.5rem;border-radius:16px;background:var(--ww-ink);box-shadow:var(--shadow)}
.hero h1{font-size:clamp(1.65rem,4.2vw,2.8rem);text-wrap:balance}
.page--tim .hero h1{color:var(--tim-navy)}
.page--tim .hero h1 .g{color:var(--tim-green)}
.hero__tagline{margin:.75rem 0 0;max-width:48ch;font-size:clamp(.95rem,1.7vw,1.12rem);color:var(--ink-soft)}
.hero__slogan{margin:1.1rem 0 0;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:clamp(1rem,2vw,1.3rem)}
.page--tim .hero__slogan{color:var(--tim-green)}

.cols{display:grid;grid-template-columns:1.65fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.6rem,4vw,2.75rem) 0}
.prose p{margin:0 0 1rem;max-width:62ch}
.prose h2{font-size:clamp(1.1rem,2.1vw,1.4rem);margin:2.1rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.page--tim .prose h2{color:var(--tim-navy)}

.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{padding:.42rem .75rem;border-radius:999px;background:var(--paper-2);font-size:.86rem;font-weight:500}
.page--tim .chips--key li{background:var(--tim-wash);color:var(--tim-navy);font-weight:600}
.page--ww .chips--key li{background:var(--ww-wash);color:var(--ww-ink);font-weight:600}

/* grille tarifaire */
.rates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem}
.rates li{border:1px solid var(--line);border-radius:12px;padding:1rem;background:#fff}
.rates b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:.98rem;margin-bottom:.55rem}
.rates .price{display:inline-block;padding:.32rem .7rem;border-radius:8px;background:var(--tim-green);color:#fff;font-weight:700;font-size:1.05rem}
.rates small{display:block;margin-top:.6rem;color:var(--ink-soft);font-size:.83rem;line-height:1.45}
.note{margin:1rem 0 0;padding:.9rem 1.1rem;border-radius:10px;background:#eaf6ee;font-size:.9rem}
.note b{color:var(--tim-green)}
.note--shop{background:var(--tim-wash);color:var(--tim-navy)}
.note--shop a{font-weight:600}

/* carte de contact */
.card{position:sticky;top:1.5rem;align-self:start;border:1px solid var(--line);border-radius:14px;background:#fff;padding:clamp(1.1rem,2.2vw,1.5rem);box-shadow:var(--shadow)}
.card h2{font-size:1rem;margin-bottom:1.1rem}
.card dl{margin:0;display:grid;gap:.95rem}
.card dt{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.card dd{margin:.18rem 0 0;font-size:.95rem;word-break:break-word}
.card dd a{text-decoration:none;font-weight:600}
.card dd a:hover{text-decoration:underline}
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.3rem;padding:.85rem 1rem;border-radius:10px;color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;transition:filter .25s var(--ease)}
.page--tim .btn{background:var(--tim-navy)}
.page--ww .btn{background:var(--ww-ink)}
.btn:hover{filter:brightness(1.22)}

/* galerie : les cadres attendent les vraies photos */
/* align-items:start, sinon chaque element s'etire a la hauteur de la rangee :
   les cadres en pointillés sont plus hauts que 4/3 et deformaient les photos. */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;align-items:start;padding-bottom:clamp(2rem,4vw,3rem)}
/* height:auto est indispensable : sans lui, l'attribut HTML height="1200" de l'image
   fixe la hauteur et aspect-ratio est ignore (il ne s'applique que si une dimension
   est auto). On garde les attributs width/height, qui evitent les sauts de mise en page. */
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:var(--paper-2)}
.gallery .slot{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:12px;display:grid;place-items:center;text-align:center;padding:1rem;color:var(--ink-soft);font-size:.78rem;line-height:1.45}
.gallery .slot code{display:block;margin-top:.4rem;font-size:.72rem;color:var(--ink)}

footer{border-top:1px solid var(--line);padding:1.5rem 0 calc(2rem + env(safe-area-inset-bottom,0px));font-size:.8rem;color:var(--ink-soft)}
footer a{color:inherit}

/* ---------- petits écrans ---------- */
@media (max-width:860px){
  /* empilés, chaque panneau prend la hauteur de son contenu : le ratio 2/3-1/3
     ne tient pas à la verticale, WinWin s'y retrouvait tronqué. */
  .rect{grid-template-columns:1fr;grid-template-rows:auto auto;aspect-ratio:auto;min-height:0}
  .panel{min-height:250px}
  .panel__shot{inset:0;width:100%;height:100%}
  .panel--ww{border-left:0;border-top:1px solid rgba(255,255,255,.55)}
  /* pas de survol possible en pratique : on montre tout d'emblée.
     Doublé avec @media (hover:none) car certains portables tactiles
     rapportent quand même hover:hover. */
  .panel__reveal{opacity:1;transform:none}
  .cols{grid-template-columns:1fr}
  .card{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- fenêtres (élément <dialog> natif) ---------- */
.sheet{
  border:0;padding:0;width:min(62rem,94vw);margin:auto;max-width:none;
  border-radius:18px;background:var(--paper);color:var(--ink);
  box-shadow:0 40px 90px -25px rgba(10,12,16,.55);overflow:visible;
}
.sheet::backdrop{background:rgba(16,19,24,.62)}
.sheet__body{
  padding:clamp(1.25rem,3vw,2.5rem);border-radius:18px;
  max-height:86vh;max-height:86svh;overflow-y:auto;overscroll-behavior:contain;
}
.sheet__body .hero{padding-top:0}
.sheet__body .gallery{padding-bottom:0}
.sheet__close{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--ink);box-shadow:0 3px 14px rgba(20,23,28,.25);
  display:grid;place-items:center;transition:background .25s var(--ease),transform .25s var(--ease);
}
.sheet__close:hover{background:var(--paper-2);transform:rotate(90deg)}
.sheet__close:focus-visible{outline:3px solid var(--tim-green);outline-offset:2px}
.page--ww .sheet__close:focus-visible{outline-color:#7b828d}
.sheet[open]{animation:sheet-in .24s var(--ease)}
.sheet[open]::backdrop{animation:fade-in .24s var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes fade-in{from{opacity:0}}
/* on bloque le défilement de la page derrière la fenêtre */
html:has(dialog[open]){overflow:hidden}

@media (max-width:860px){
  .sheet{width:100vw;max-width:100vw;border-radius:18px 18px 0 0;margin:auto auto 0}
  .sheet__body{max-height:88svh;border-radius:18px 18px 0 0;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
}