/* APPROCA, feuille de style commune (tirée de la démo validée CLAUDE/Données/maquettes/accueil-demo.html) */
:root{
  --noir:#000000;
  --blanc:#FFFFFF;
  --gris:#8E8E93;
  --filet:#262626;
  --surface:#0D0D0D;
  --ok:#7FD6A4;
  --police:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --titre:"Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noir);color:var(--blanc);font-family:var(--police);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--noir)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}
h1,h2,h3,p{margin:0}
.cadre{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.cadre{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}

/* En-tête : transparent sur le héros, noir dès qu'on défile */
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
header.plein{background:rgba(0,0,0,.92);border-color:var(--filet);backdrop-filter:blur(10px)}
header .cadre{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
/* Logo compact (en-tête, pied) : le carré AR, et APPROCA / la division à côté */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--blanc)}
/* le carré compact : AR découpé dans le blanc (transparent), comme le grand logo */
.logo-carre{width:38px;height:38px;display:block;overflow:visible;flex:none}
.lc-txt{font-family:var(--titre);font-size:27px;letter-spacing:.5px}
.logo-txt{display:grid;gap:2px}
.logo-nom{font:400 22px/.9 var(--titre);letter-spacing:.06em}
.logo-nom .lettre,.logo-div .lettre{display:inline-block;min-width:.42em;text-align:center}
.logo-div .lettre{min-width:.5em}
.logo-div{font:400 9.5px/1 var(--titre);letter-spacing:.14em;color:var(--gris)}

/* Logo animé AR (version validée, logo-anime-ar-FINAL.html) */
.ar-logo{--taille:230px;position:relative;width:var(--taille);display:grid;gap:calc(var(--taille)*.06);cursor:default;background:transparent;border:0;padding:0;color:var(--blanc);text-align:left;font:inherit;font-family:var(--titre)}
.ar-logo:focus-visible{outline:1px dashed var(--gris);outline-offset:22px}
.ar-carre{width:100%;aspect-ratio:1/1;display:block;overflow:visible}
.ar-lettres{font-family:var(--titre);font-size:150px;fill:#000;letter-spacing:2px}
.ar-pct{font-family:var(--mono);font-size:11px;fill:#000}
.ar-cadre{position:absolute;left:-14px;top:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;pointer-events:none}
.ar-cadre path{fill:none;stroke:var(--blanc);stroke-width:2}
.ar-nom,.ar-div{display:flex;justify-content:space-between;white-space:nowrap;line-height:.9;overflow:hidden}
.ar-nom span,.ar-div span{display:inline-block;min-width:.2em;text-align:center}
.ar-nom{font-size:calc(var(--taille)*.34);padding-top:.04em}
.ar-div{font-size:calc(var(--taille)*.088);color:var(--gris);line-height:1.1;position:relative;margin-top:calc(var(--taille)*-.045)}
.ar-curseur{position:absolute;right:-.7em;top:.08em;width:.5em;height:.85em;background:var(--blanc);opacity:0}

/* SUPERCHARGEMENT : un voile noir couvre tout le SITE, sauf le logo qui passe au-dessus et joue à sa place.
   À la fin, le voile s'éclaircit lentement et le SITE, déjà en place dessous, apparaît. */
html.intro body{overflow:hidden}
#voile{position:fixed;inset:0;background:#000;z-index:50;opacity:0;pointer-events:none;transition:opacity 3s cubic-bezier(.45,0,.25,1)}
html.intro #voile{opacity:1;pointer-events:auto}
/* le logo passe au-dessus du voile seulement pendant le SUPERCHARGEMENT et le fondu ; ensuite il repasse sous l'en-tête */
.ar-logo{z-index:2}
html.intro .ar-logo,html.revele .ar-logo{z-index:60}
/* Le logo reste invisible tant que l'animation n'a pas posé son état de départ : on ne le voit jamais « fini » avant le SUPERCHARGEMENT */
.ar-logo:not(.pret){visibility:hidden}
.passer{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:70;font:500 12px var(--police);letter-spacing:.06em;color:var(--gris);background:none;border:0;cursor:pointer;opacity:0;transition:opacity .4s}
html:not(.intro) .passer{visibility:hidden}
html.intro .passer{opacity:1}
nav{display:flex;gap:22px}
nav a{text-decoration:none;font-size:.9rem;color:rgba(255,255,255,.72);padding-block:4px;border-bottom:1px solid transparent}
nav a:hover{color:var(--blanc)}
nav a[aria-current="page"]{color:var(--blanc);border-color:var(--blanc)}

/* Héros */
/* pas d'« isolation » ici : le logo doit pouvoir passer au-dessus du voile du SUPERCHARGEMENT */
.hero{position:relative;min-height:92vh;min-height:92svh;display:grid;align-items:center;overflow:hidden}
#lumiere{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero h1,.hero-pied{z-index:2}
.hero h1{position:relative}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 85%,#000)}
.hero-contenu{display:grid;justify-items:center;gap:56px;padding-block:120px 96px}
.hero h1{font-weight:700;font-size:clamp(2.2rem,6vw,4.8rem);line-height:.95;letter-spacing:-.04em;text-align:center}
.hero h1 span{display:block}
.masque{background:linear-gradient(100deg,#d9e6f2 0%,#8fa9c4 18%,#f4efe6 34%,#6d86a3 52%,#e8eef4 70%,#9db3ca 86%,#f2ede4 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glisse 14s linear infinite}
@keyframes glisse{to{background-position:300% 0}}
.hero-pied{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;gap:16px;font-size:.9rem;color:rgba(255,255,255,.75);flex-wrap:wrap}

/* Grille d'applications */
.grille{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--filet)}
.case{position:relative;min-height:340px;padding-block:44px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;text-decoration:none;border-bottom:1px solid var(--filet);overflow:hidden;isolation:isolate}
.case:nth-child(odd){border-right:1px solid var(--filet)}
.case .interieur{display:flex;flex-direction:column;justify-content:space-between;gap:28px;height:100%}
.case h2{font-weight:700;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.035em}
.case h2 span{display:block}
.case h2 .teinte{-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;transition:background-position 1.2s ease}
.case:hover h2 .teinte{background-position:100% 0}
.case .bas{display:flex;justify-content:space-between;align-items:end;gap:16px;color:var(--gris);font-size:.92rem}
.case .bas strong{color:var(--blanc);font-weight:500}
.case .fond{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s ease}
.case:hover .fond,.case:focus-visible .fond{opacity:.3}
.case.inactive{cursor:default}
.statut{white-space:nowrap}

/* Énoncé */
.enonce{padding-block:120px;border-bottom:1px solid var(--filet)}
.enonce p{font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.12;letter-spacing:-.03em;font-weight:600;max-width:22em;text-wrap:balance}
.enonce p .doux{color:var(--gris)}
.faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:72px;color:var(--gris);font-size:.95rem}
.faits strong{display:block;color:var(--blanc);font-weight:600;font-size:1.05rem;margin-bottom:6px}

footer .cadre{padding-block:56px 40px;display:grid;gap:22px}
footer .logo{justify-self:start}
footer nav{gap:22px;flex-wrap:wrap}
footer small{color:#5c5c60}

/* Pages de démo */
.demo{padding-top:120px;padding-bottom:96px}
.retour{color:var(--gris);text-decoration:none;font-size:.9rem}
.retour:hover{color:var(--blanc)}
.demo h1{font-weight:700;font-size:clamp(2.6rem,7vw,6rem);line-height:.95;letter-spacing:-.045em;margin-top:28px}
.demo h1 .teinte{-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.demo .chapeau{color:var(--gris);max-width:36em;margin-top:22px;font-size:1.05rem}
.etiquette-demo{display:inline-block;margin-top:18px;font-size:.8rem;color:var(--gris);border:1px solid var(--filet);padding:4px 10px;border-radius:999px}
.zone{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);border-top:1px solid var(--filet);margin-top:56px}
.zone > div{padding-block:32px;min-width:0}
.zone > div:first-child{border-right:1px solid var(--filet);padding-right:32px}
.zone > div:last-child{padding-left:32px}
.zone h2{font-size:1.1rem;font-weight:600;margin-bottom:20px}
.note{color:var(--gris);font-size:.85rem;margin-top:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font:600 .95rem var(--police);padding:14px 22px;border-radius:999px;background:var(--blanc);color:var(--noir);text-decoration:none}
.btn:hover{background:#dcdcdc}
.btn[disabled]{opacity:.3;cursor:not-allowed}
.opt{border:1px solid var(--filet);background:transparent;color:var(--blanc);font:500 .9rem var(--police);padding:10px 14px;border-radius:999px;cursor:pointer}
.opt:hover{border-color:#555}
.opt[aria-pressed="true"]{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.opt[disabled]{color:#4a4a4e;text-decoration:line-through;cursor:not-allowed;border-color:var(--filet)}
.rangee{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.jours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:24px}
.jour{border:1px solid var(--filet);background:transparent;color:var(--blanc);padding:12px 2px;cursor:pointer;display:grid;gap:2px;text-align:center;font-family:var(--police);border-radius:4px}
.jour small{color:var(--gris);font-size:.72rem}
.jour strong{font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}
.jour[aria-pressed="true"]{background:var(--blanc);color:var(--noir)}
.jour[aria-pressed="true"] small{color:#555}
.jour[disabled]{opacity:.3;cursor:not-allowed}
.heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.heures .opt{border-radius:4px;font-variant-numeric:tabular-nums}
dl{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;margin:0 0 24px}
dt{color:var(--gris)}
dd{margin:0;text-align:right}
.champ{display:grid;gap:6px;margin-bottom:14px}
.champ label{font-size:.85rem;color:var(--gris)}
.champ input{font:inherit;color:var(--blanc);background:transparent;border:0;border-bottom:1px solid #3a3a3e;padding:8px 0}
.champ input:focus{outline:none;border-color:var(--blanc)}
.confirme{border-left:2px solid var(--ok);padding:10px 14px;margin-top:18px;font-size:.95rem;color:#dfe9e3}

.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:56px}
.photo{position:relative;aspect-ratio:4/5;margin:0;overflow:hidden;max-width:100%}
.photo .img{position:absolute;inset:0;transition:transform .8s ease}
.photo:hover .img{transform:scale(1.04)}
.photo figcaption{position:absolute;left:12px;bottom:10px;font-size:.75rem;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.coeur{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center}
.coeur svg{width:16px;height:16px}
.coeur[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.barre-galerie{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:28px;border-top:1px solid var(--filet);margin-top:56px}
.barre-galerie .compte{font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}

.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--filet);margin-top:56px}
.chiffres div{padding:28px 0;display:grid;gap:6px}
.chiffres div + div{border-left:1px solid var(--filet);padding-left:28px}
.chiffres span{color:var(--gris);font-size:.9rem}
.chiffres strong{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.chiffres em{font-style:normal;color:var(--ok);font-size:.85rem}
.graphe{width:100%;height:auto;display:block}
.graphe text{fill:var(--gris);font:12px var(--police)}
.graphe line{stroke:var(--filet)}
.graphe rect{fill:#3a3a3e}
.graphe rect.fin{fill:var(--blanc)}
.defile{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;color:var(--gris);font-weight:400;padding:0 0 10px;border-bottom:1px solid var(--filet)}
td{padding:12px 0;border-bottom:1px solid var(--filet);font-variant-numeric:tabular-nums}
.num{text-align:right}
td .attente{color:var(--gris)}

@media (max-width:820px){
  .grille{grid-template-columns:1fr}
  .case:nth-child(odd){border-right:0}
  .case{min-height:260px}
  .faits{grid-template-columns:1fr}
  .zone{grid-template-columns:1fr}
  .zone > div:first-child{border-right:0;padding-right:0;border-bottom:1px solid var(--filet)}
  .zone > div:last-child{padding-left:0}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chiffres{grid-template-columns:1fr}
  .chiffres div + div{border-left:0;padding-left:0;border-top:1px solid var(--filet)}
}
@media (max-width:480px){
  nav{gap:14px}
  nav a{font-size:.82rem}
  .jours{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-pied{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Pages de texte (légales, contact, 404) ---------- */
.page-texte{padding-top:150px;padding-bottom:110px;max-width:860px}
.page-texte h1{font-weight:700;font-size:clamp(2.2rem,5.4vw,4rem);line-height:.98;letter-spacing:-.04em}
.page-texte .maj{color:var(--gris);font-size:.9rem;margin-top:16px}
.page-texte .avis{border:1px solid var(--filet);padding:14px 18px;margin-top:28px;color:var(--gris);font-size:.92rem}
.page-texte h2{font-size:1.25rem;font-weight:600;margin-top:48px;margin-bottom:12px;letter-spacing:-.01em}
.page-texte p,.page-texte li{color:#cfcfd4;max-width:68ch}
.page-texte p + p{margin-top:12px}
.page-texte ul{padding-left:1.2em;display:grid;gap:6px;margin:12px 0 0}
.page-texte a{color:var(--blanc)}
.page-texte table{margin-top:14px}
.page-texte td,.page-texte th{padding-right:16px;vertical-align:top}
.a-completer{color:#ffd28a}

/* ---------- Pied de page : liens légaux ---------- */
.pied-legal{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem}
.pied-legal a,.pied-legal button{color:var(--gris);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.pied-legal a:hover,.pied-legal button:hover{color:var(--blanc)}

/* ---------- Bandeau de témoins ---------- */
.temoins{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:45;max-width:560px;background:#0d0d0d;border:1px solid var(--filet);padding:20px;display:grid;gap:14px;font-size:.9rem;color:#cfcfd4}
.temoins h2{font-size:1rem;font-weight:600;color:var(--blanc);margin:0}
.temoins p{margin:0}
.temoins label{display:flex;gap:10px;align-items:flex-start}
.temoins .boutons{display:flex;gap:8px;flex-wrap:wrap}
.temoins .btn{padding:10px 16px;font-size:.88rem}
.temoins .btn.secondaire{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 1px #3a3a3e}

/* ---------- 404 ---------- */
.page-404{min-height:80vh;display:grid;align-content:center;gap:18px;padding-top:120px}
.page-404 .code{font:400 clamp(6rem,20vw,14rem)/.85 var(--titre);letter-spacing:.02em}

/* ---------- Couleurs des applications (sans style en ligne, pour la politique de sécurité du contenu) ---------- */
.case .fond{background:radial-gradient(circle 420px at var(--mx,50%) var(--my,50%),var(--c),transparent 72%),#000}
.c-ambre{--c:#c9a27a}.c-acier{--c:#7fa7c9}.c-sauge{--c:#8fbf9c}.c-lilas{--c:#a89ac9}
.t-ambre{background-image:linear-gradient(90deg,#f0d3b0,#c48f63,#f6e7d3,#b07a52)}
.t-acier{background-image:linear-gradient(90deg,#bfe0f5,#6f9cc4,#e3f1fa,#5b86b0)}
.t-sauge{background-image:linear-gradient(90deg,#cdeed5,#77b388,#e6f6ea,#5f9b70)}
.t-lilas{background-image:linear-gradient(90deg,#ddd3f2,#9384bd,#efeaf9,#7f70ab)}
footer .cadre{border-top:1px solid var(--filet)}