/* home.css — page d'accueil de Companea.
   Parti pris : de l'air, une idée par section, et les mockups ENTIERS (jamais coupés).
   La page suit la structure de l'app (Animaux, Santé, Routine, Agenda) pour qu'on
   comprenne comment elle est organisée sans avoir à la lire.
   Palette : blanc + ivoire chaud, teal de marque en accent. Le gris-bleu froid a été
   écarté (trop clinique pour une app d'animaux). Tout est en variables ci-dessous. */

:root{
  --ink:#141918;
  --muted:#66716f;
  --surface:#ffffff;
  --band:#f8f4ed;                 /* ivoire chaud, la bande alternée */
  --accent:#0f7b8a;
  --accent-soft:#e6f2f3;          /* halo teal du héros */
  --border:#eae4da;
  --shadow:rgba(20,40,42,.16);
  --maxw:1120px;
  /* TYPOGRAPHIE MIXTE, calée sur l'app (D053/D071) : SF Rounded pour les GRANDS TITRES
     seulement, SF Pro pour le corps. Du rounded partout serait déjà hors charte. */
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eef3f2;
    --muted:#93a2a0;
    --surface:#0b1011;
    --band:#111819;
    --accent:#5fbcc8;
    --accent-soft:#102a2e;
    --border:#1f2827;
    --shadow:rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;              /* garde-fou : rien ne doit élargir la page */
  background:var(--surface);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- en-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px;border-radius:7px}
.brand .name{font-family:var(--rounded);font-weight:700;font-size:18px;letter-spacing:-0.01em;color:var(--ink)}
.brand .name span{color:var(--muted);font-weight:500}
/* Bouton d'en-tête. Il remplace l'ancienne pastille « Gratuit · bientôt sur l'App
   Store » : trop longue, elle chevauchait le nom de la marque sur iPhone. Un libellé
   court + `flex-shrink:0` sur le bouton et `min-width:0` sur la marque garantissent
   que les deux ne se marchent jamais dessus, quelle que soit la largeur. */
.brand{min-width:0}
.brand .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-tete{
  flex:0 0 auto;
  font-size:14.5px;font-weight:600;color:#fff;background:var(--accent);
  border-radius:999px;padding:9px 16px;white-space:nowrap;
  transition:transform .15s ease, filter .15s ease;
}
.cta-tete:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:560px){
  .brand .name span{display:none}
  .cta-tete{font-size:13.5px;padding:8px 13px}
}

/* Bouton principal (héros) */
.cta{
  display:inline-block;margin-top:30px;
  font-size:17px;font-weight:600;color:#fff;background:var(--accent);
  border-radius:14px;padding:15px 28px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 32%,transparent);
  transition:transform .15s ease, filter .15s ease;
}
.cta:hover{color:#fff;filter:brightness(1.08);transform:translateY(-2px)}
.cta-note{margin-top:14px;font-size:14.5px;color:var(--muted)}

@media(max-width:520px){
}

/* ---------- héros ---------- */
.hero{
  position:relative;
  text-align:center;
  /* AUCUNE marge en bas : la capture est coupée et se fond en transparence, elle doit
     donc toucher la délimitation avec la section suivante. Un vide entre les deux
     laissait le dégradé flotter au milieu de rien. */
  padding:84px 0 0;
  background:
    radial-gradient(115% 80% at 50% -10%, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  border-bottom:1px solid var(--border);
}
.hero .mark{width:74px;height:74px;border-radius:17px;margin:0 auto 30px;box-shadow:0 12px 32px rgba(15,123,138,.24)}
.hero h1{
  font-family:var(--rounded);
  font-size:clamp(37px,5.6vw,68px);
  line-height:1.04;letter-spacing:-0.035em;font-weight:700;
  margin:0 auto 24px;max-width:17ch;text-wrap:balance;
}
.hero .sub{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:58ch;margin:0 auto;text-wrap:pretty}

/* Le héros ne montre plus qu'UN mockup, plus grand : trois vignettes obligeaient à
   répéter ailleurs les mêmes écrans, ce que le proprio ne voulait plus. */
.phones{display:flex;justify-content:center;margin-top:52px;padding:0 24px}
.phones .phone{width:clamp(300px,34vw,430px);filter:none;margin-bottom:-2px}

/* ---------- mockup ---------- */
/* Le châssis de l'iPhone fait partie de l'IMAGE (WebP détouré) : pas de cadre CSS.
   L'ombre est en `drop-shadow` pour épouser la silhouette et non un rectangle. */
.phone{filter:drop-shadow(0 20px 30px var(--shadow))}
.phone picture{display:block}
.phone img{display:block}


/* ---------- sections (une par onglet de l'app) ---------- */
.feature{padding:104px 0;border-bottom:1px solid var(--border)}
.feature.alt{background:var(--band)}
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,84px);align-items:center}
.feature.reverse .copy{order:2}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.feature h2{
  font-family:var(--rounded);
  font-size:clamp(27px,3.5vw,44px);line-height:1.08;letter-spacing:-0.03em;font-weight:700;
  margin:0 0 18px;max-width:19ch;text-wrap:balance;
}
.feature p{font-size:clamp(16.5px,1.35vw,18.5px);color:var(--muted);margin:0;max-width:42ch}
.feature .shot{display:flex;justify-content:center}
.feature .shot .phone{width:min(292px,82%)}
@media(max-width:860px){
  .feature{padding:76px 0}
  .feature .wrap{grid-template-columns:1fr;gap:38px}
  .feature.reverse .copy{order:0}
  .feature h2,.feature p{max-width:none}
  .feature .shot .phone{width:min(258px,68%)}
}

/* ---------- confiance ---------- */
.trust{background:var(--band);padding:104px 0;text-align:center}
.trust h2{
  font-family:var(--rounded);
  font-size:clamp(27px,3.4vw,42px);line-height:1.08;letter-spacing:-0.03em;
  font-weight:700;margin:0 0 18px;text-wrap:balance;
}
.trust p{font-size:clamp(16.5px,1.35vw,18.5px);color:var(--muted);max-width:54ch;margin:0 auto}
.trust .cta{margin-top:34px}
.trust .disc{margin:40px auto 0;font-size:14px;opacity:.85;max-width:58ch}

/* ---------- pied ---------- */
.site-footer{background:var(--band);border-top:1px solid var(--border);padding:34px 0;color:var(--muted);font-size:14.5px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

/* ==========================================================================
   PAGES LÉGALES ET TEXTES LONGS (confidentialité, CGU, support, mentions)
   Tout est PORTÉ PAR `.legal` : sans ce préfixe, ces règles écraseraient la
   mise en page de l'accueil, qui utilise aussi `main`, `p` et `h2`.
   Les NOMS DE FICHIERS ne changent pas : ce sont eux qui servent les URL
   déclarées dans App Store Connect (/confidentialite, /support).
   ========================================================================== */

.legal{padding:56px 0 96px}
.legal .wrap{max-width:748px}

.legal .page-title{
  font-family:var(--rounded);
  font-size:clamp(30px,3.8vw,44px);line-height:1.09;letter-spacing:-0.03em;
  font-weight:700;margin:0 0 10px;
}
.legal .updated{color:var(--muted);font-size:14.5px;margin:0 0 36px}
.legal .lede{font-size:19px;color:var(--muted);margin:0 0 30px;text-wrap:pretty}

.legal h2{
  font-family:var(--rounded);
  font-size:21px;font-weight:700;letter-spacing:-0.015em;
  margin:40px 0 10px;
}
.legal h3{font-size:17.5px;font-weight:600;margin:26px 0 6px}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{padding-left:22px;margin:0 0 16px}
.legal li{margin:6px 0}
.legal strong{font-weight:600}
.legal a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.legal hr{border:none;border-top:1px solid var(--border);margin:40px 0}

/* encadré d'attention */
.legal .note{
  background:var(--band);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 20px;margin:26px 0;
  font-size:15.5px;color:var(--muted);
}
.legal .note strong{color:var(--ink)}
.legal .note p:last-child{margin-bottom:0}

/* Avertissement de bas de page : il vit HORS du conteneur `.wrap` dans le HTML,
   il faut donc lui redonner sa colonne, sinon il part en pleine largeur. */
.legal .disc{
  max-width:748px;margin:48px auto 0;padding:0 24px;
  font-size:14px;color:var(--muted);opacity:.85;text-align:center;
}

/* ---------- apparitions au défilement ---------- */
@media (prefers-reduced-motion: no-preference){
  /* `.js` n'est posé QUE si le script s'exécute : sans JS, rien n'est masqué et tout
     le contenu reste lisible. Sinon une panne de script effacerait des sections entières. */
  .js [data-anim]{
    opacity:0;transform:translateY(20px);
    transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1);
  }
  .js [data-anim].vu{opacity:1;transform:none}
  .js [data-anim="apres"]{transition-delay:.14s}
}

/* ==========================================================================
   L'EXPLORATEUR
   Huit écrans dans la hauteur d'un seul. Les panneaux sont SUPERPOSÉS dans une
   même cellule de grille et fondus : la hauteur ne saute pas d'un écran à
   l'autre, et rien ne se retire du flux. La superposition est portée par `.js`,
   donc sans JavaScript les huit captures s'affichent, à la suite.
   ========================================================================== */

.explo{padding:92px 0;background:var(--surface);border-bottom:1px solid var(--border)}
.explo > .wrap > h2{
  font-family:var(--rounded);
  font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-0.03em;font-weight:700;
  margin:0 0 clamp(28px,3.2vw,44px);max-width:20ch;text-wrap:balance;
}
.explo-corps{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}

.explo .onglets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.explo .onglets button{
  display:block;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:transparent;border:1px solid transparent;border-radius:16px;padding:12px 16px;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.explo .onglets strong{
  display:block;font-family:var(--rounded);font-weight:700;letter-spacing:-0.015em;
  font-size:17.5px;line-height:1.25;
}
.explo .onglets span{display:block;font-size:15px;color:var(--muted);margin-top:2px;line-height:1.4}
.explo .onglets button:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.explo .onglets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.explo .onglets button[aria-selected="true"]{background:var(--band);border-color:var(--border)}
.explo .onglets button[aria-selected="true"] strong{color:var(--accent)}

.explo .ecran{display:grid}
.explo .vue{display:flex;flex-direction:column;align-items:center}
.explo .phone{width:min(268px,78%)}
.explo .legende{
  margin:20px 0 0;max-width:38ch;text-align:center;
  font-size:15.5px;line-height:1.5;color:var(--muted);
}

/* Le fondu. `visibility` sort le panneau inactif de l'ordre de tabulation et de
   l'arbre d'accessibilité, mais bascule APRÈS la transition pour ne pas la couper. */
.js .explo .vue{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .32s ease, visibility 0s .32s;
}
.js .explo .vue.actif{
  opacity:1;visibility:visible;
  transition:opacity .32s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce){
  .js .explo .vue{transition:opacity .01s, visibility 0s .01s}
  .js .explo .vue.actif{transition:opacity .01s, visibility 0s}
}
html:not(.js) .explo .ecran{display:flex;flex-wrap:wrap;gap:24px;justify-content:flex-start}

@media(max-width:860px){

  .explo{padding:64px 0}
  .explo-corps{grid-template-columns:1fr;gap:0}
  /* La liste devient une RANGÉE de pastilles COLLÉE sous l'en-tête : on peut passer
     d'un écran à l'autre sans jamais la perdre de vue. Avant, un recentrage faisait
     remonter la page et cachait justement les pastilles. */
  .explo .onglets{
    position:sticky;top:63px;z-index:6;
    flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin:0 -24px;padding:12px 24px;
    background:var(--surface);
    border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  }
  .explo .onglets::-webkit-scrollbar{display:none}
  .explo .onglets li{flex:0 0 auto}
  .explo .onglets button{width:auto;padding:9px 15px;border-radius:999px;
    background:var(--band);border-color:var(--border);white-space:nowrap}
  .explo .onglets strong{font-size:15.5px}
  .explo .onglets span{display:none}
  .explo .onglets button[aria-selected="true"]{background:var(--accent);border-color:var(--accent)}
  .explo .onglets button[aria-selected="true"] strong{color:#fff}
  .explo .ecran{order:2;margin-top:26px}
  .explo .phone{width:min(238px,64%)}
}

/* Précision sous le paragraphe principal d'une section : plus petite et plus grise,
   elle porte la nuance sans concurrencer le message. */
.feature .copy p.apres{margin-top:14px;font-size:15.5px;opacity:.85}