/* panasse.club : studio d'applications. Mêmes polices et couleurs que getwido.app,
   fond de points en vague (assets/site.js). Une seule feuille pour toutes les pages. */

@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin-500-800.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Repli à la même chasse, pour que rien ne bouge quand la vraie police arrive. */
@font-face { font-family: "Bricolage repli"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"); size-adjust: 93.5%; ascent-override: 99.5%; descent-override: 28.9%; line-gap-override: 0%; }
@font-face { font-family: "Figtree repli"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"); size-adjust: 100.7%; ascent-override: 94.3%; descent-override: 24.8%; line-gap-override: 0%; }

:root {
  --fond: #f3f0eb;
  --blanc: #ffffff;
  --encre: #1e1b18;
  --encre-2: #3b332c;
  --gris: #6a6058;
  --ligne: #e7e1d8;
  --ligne-2: #ede3d8;
  --peche: #f4946e;
  --peche-fonce: #b5461f;
  --nuit-texte: #f7f1ea;
  --nuit-gris: #b4aa9f;
  --nuit-ligne: #332e29;
  --bezel: #12100f;
  --t-peche: #ffd9c7;
  --t-menthe: #cfefdc;
  --t-lilas: #e4ddff;
  --t-beurre: #ffeaae;
  --titres: "Bricolage Grotesque", "Bricolage repli", ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
  --texte: "Figtree", "Figtree repli", -apple-system, "Segoe UI", system-ui, sans-serif;
  --doux: cubic-bezier(.2, .8, .2, 1);
  --ressort: cubic-bezier(.34, 1.4, .64, 1);
  --marge: clamp(20px, 4.5vw, 64px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--peche-fonce); }
:focus-visible { outline: 2px solid var(--peche-fonce); outline-offset: 3px; border-radius: 6px; }
.visuel-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.point { color: var(--peche); }
.cadre { max-width: 1440px; margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }

/* ---------- En-tête (posé sur le fond animé de l'accueil) ---------- */
.saut { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--encre); color: #fff8f1; font-weight: 600; text-decoration: none; }
.saut:focus { top: 12px; color: #fff8f1; }
.entete { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.page-texte .entete { position: relative; }
.entete .cadre { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: block; line-height: 0; }
.logo img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 8px 28px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; }
.langues { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--ligne); font-size: 13px; font-weight: 600; }
.langues a { padding: 5px 11px; border-radius: 999px; color: var(--gris); }
.langues a[aria-current="true"] { background: var(--encre); color: #fff8f1; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 16px; transition: transform .4s var(--ressort), background-color .2s; }
.bouton:hover { transform: translateY(-2px); }
.bouton-encre { background: var(--encre); color: #fff8f1; }
.bouton-encre:hover { color: #fff8f1; background: #000; }
.bouton-peche { background: var(--peche); color: var(--encre); }
.bouton-peche:hover { color: var(--encre); background: #f6a27f; }
.bouton-petit { height: 40px; padding: 0 18px; font-size: 14px; }
.lien-fleche { font-weight: 600; text-decoration: none; }
.lien-fleche span { display: inline-block; transition: transform .3s var(--doux); }
.lien-fleche:hover span { transform: translateX(4px); }
.menu-bouton { display: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--encre); color: #fff8f1; font: 600 15px var(--texte); cursor: pointer; }

/* ---------- Haut de page ---------- */
.ouverture { position: relative; overflow: hidden; min-height: max(700px, min(100svh, 920px)); display: flex; flex-direction: column; }
.ouverture canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ouverture-corps, .ouverture-pied { position: relative; width: 100%; }
.ouverture-corps { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px; padding-top: 120px; padding-bottom: 40px; }
.ouverture-texte { flex: 1 1 560px; min-width: 0; max-width: 700px; }
.badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--ligne); font-size: 13px; font-weight: 500; color: var(--encre-2); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--peche); }
h1 { margin: 24px 0 0; font-family: var(--titres); font-weight: 800; font-size: clamp(44px, 6.2vw, 92px); line-height: .95; letter-spacing: -0.035em; text-wrap: balance; }
.chapo { margin: 26px 0 0; max-width: 500px; font-size: 19px; line-height: 1.55; color: var(--encre-2); }
.actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.ouverture-visuel { flex: 0 0 470px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pastilles li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--ligne); font-size: 14px; font-weight: 600; }
.pastilles li:first-child { background: var(--encre); color: #fff8f1; box-shadow: none; }
.pastilles svg { width: 17px; height: 17px; flex: none; }
.ouverture-pied { padding-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--gris); }
.ouverture-pied .etat::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--peche); margin-right: 10px; }

/* ---------- iPhone ---------- */
.iphone { width: 286px; padding: 9px; border-radius: 50px; background: var(--bezel); box-shadow: inset 0 0 0 1px #45403b, 0 34px 70px rgba(74, 52, 38, .22); }
.iphone .ecrans { position: relative; border-radius: 41px; overflow: hidden; }
.iphone .ecrans img { width: 100%; height: auto; }
.iphone .ecrans .ecran { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: ecran 16s ease-in-out 1s infinite; }
@keyframes ecran { 0% { opacity: 0 } 4% { opacity: 1 } 25% { opacity: 1 } 29% { opacity: 0 } 100% { opacity: 0 } }

/* ---------- Wido ---------- */
.wido { padding-top: 110px; padding-bottom: 100px; }
.wido-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.wido-tete > div { max-width: 720px; }
.surtitre { margin: 0; font-size: 14px; font-weight: 600; color: var(--peche-fonce); }
h2 { margin: 12px 0 0; font-family: var(--titres); font-weight: 800; font-size: clamp(38px, 4.6vw, 64px); line-height: .98; letter-spacing: -0.035em; }
.wido-tete p:last-child { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--gris); }
.cartes { margin: 52px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.carte { height: 470px; border-radius: 26px; padding: 22px 22px 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ressort); }
.carte:hover { transform: translateY(-6px); }
.carte p { margin: 0; font-size: 16px; line-height: 1.35; }
.carte b { font-weight: 700; }
.carte .ecran-coupe { margin: 22px auto 0; width: 76%; max-width: 250px; padding: 7px 7px 0; border-radius: 34px 34px 0 0; background: var(--bezel); }
.carte .ecran-coupe img { border-radius: 28px 28px 0 0; }
.carte-peche { background: var(--t-peche); }
.carte-menthe { background: var(--t-menthe); }
.carte-lilas { background: var(--t-lilas); }
.carte-beurre { background: var(--t-beurre); }
.garanties { margin: 16px 0 0; border-radius: 22px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--ligne); display: flex; flex-wrap: wrap; }
.garanties p { flex: 1 1 280px; margin: 0; padding: 22px 26px; font-size: 15px; line-height: 1.45; color: var(--encre-2); }
.garanties p + p { border-left: 1px solid var(--ligne-2); }
.garanties b { font-weight: 700; color: var(--encre); }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--nuit-texte); }
.pied .cadre { padding-top: 96px; padding-bottom: 40px; }
.pied p { margin: 0; font-size: 15px; color: var(--nuit-gris); }
.pied .courriel { display: inline-block; margin-top: 14px; font-family: var(--titres); font-weight: 800; font-size: clamp(36px, 6vw, 88px); line-height: 1.05; letter-spacing: -0.04em; text-decoration: none; color: var(--nuit-texte); overflow-wrap: anywhere; }
.pied .courriel:hover { color: var(--peche); }
.pied-bas { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--nuit-ligne); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--nuit-gris); }
.pied-bas img { height: 22px; width: auto; }
.pied-bas a { color: var(--nuit-gris); }
.pied-bas a:hover { color: var(--nuit-texte); }
.pied-bas .langues-pied a { text-decoration: none; }
.pied-bas .langues-pied a[aria-current="true"] { color: var(--nuit-texte); }

/* ---------- Page de texte (mentions légales) ---------- */
.texte-page { max-width: 760px; margin: 0 auto; padding: 40px var(--marge) 110px; }
.texte-page h1 { font-size: clamp(40px, 5vw, 64px); }
.texte-page h2 { margin-top: 48px; font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.texte-page p { margin: 14px 0 0; color: var(--encre-2); }
.texte-page .note { font-size: 15px; color: var(--gris); }
.retour { display: inline-block; margin-top: 8px; font-weight: 600; text-decoration: none; }

/* ---------- Entrées ---------- */
.apparait { animation: apparait 1s var(--doux) both; }
.ressort { animation: ressort .8s var(--ressort) both; }
.flotte { animation: flotte 7s ease-in-out infinite alternate; }
@keyframes apparait { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ressort { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes flotte { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .4s; }
.pastilles li:nth-child(1) { animation-delay: .9s; } .pastilles li:nth-child(2) { animation-delay: .98s; } .pastilles li:nth-child(3) { animation-delay: 1.06s; } .pastilles li:nth-child(4) { animation-delay: 1.14s; }
.ecran-2 { animation-delay: 5s !important; } .ecran-3 { animation-delay: 9s !important; } .ecran-4 { animation-delay: 13s !important; }

/* ---------- Écrans moyens et petits ---------- */
@media (max-width: 1100px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ouverture-corps { padding-top: 104px; }
  .ouverture-visuel { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .menu-bouton { display: inline-flex; align-items: center; }
  .entete.ouvert .nav { display: flex; position: absolute; top: 72px; right: var(--marge); left: var(--marge); flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; border-radius: 22px; background: var(--blanc); box-shadow: 0 0 0 1px var(--ligne), 0 24px 50px rgba(74, 52, 38, .16); }
  .entete.ouvert .nav > a { padding: 12px 14px; border-radius: 14px; font-size: 17px; }
  .entete.ouvert .nav > a:hover { background: var(--fond); }
  .entete.ouvert .nav .langues { align-self: flex-start; margin: 6px 8px; }
  .entete.ouvert .nav .bouton { height: 48px; margin-top: 4px; }
  .entete .cadre { height: 68px; }
  .logo img { height: 24px; }
  .ouverture { min-height: 0; }
  .ouverture-corps { gap: 36px; padding-top: 86px; padding-bottom: 28px; }
  .ouverture-texte { flex-basis: 100%; }
  .chapo { font-size: 16px; }
  .badge { font-size: 12.5px; height: 30px; }
  .iphone { width: 230px; padding: 7px; border-radius: 40px; }
  .iphone .ecrans { border-radius: 33px; }
  .ouverture-pied { font-size: 13px; }
  .ouverture-pied .etat { padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--fond); }
  .ouverture-pied span:last-child { display: none; }
  .pastilles { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; }
  .wido { padding-top: 72px; padding-bottom: 64px; }
  .cartes { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .carte { height: 440px; }
  .carte .ecran-coupe { width: 64%; }
  .garanties p + p { border-left: 0; border-top: 1px solid var(--ligne-2); }
  .pied .cadre { padding-top: 64px; }
  .pied-bas { margin-top: 48px; flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .apparait, .ressort, .flotte, .iphone .ecrans .ecran { animation: none; }
  .bouton, .carte, .lien-fleche span { transition: none; }
}