:root { --fond: #FFF4D6; --texte: #1B1B3A; --doux: #55557A; --carte: #FFFFFF; --accent: #FF5A5F; --violet: #7B5CFF; --soleil: #FFD23F; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
header img { width: 48px; height: 48px; border-radius: 12px; border: 3px solid var(--texte); }
header a { color: var(--texte); text-decoration: none; font-weight: 800; font-size: 22px; }
nav { margin-left: auto; font-size: 15px; display: flex; gap: 12px; flex-wrap: wrap; }
nav a { color: var(--violet); font-weight: 700; font-size: 15px; text-decoration: none; }
h1 { font-size: 32px; line-height: 1.2; margin: 24px 0 8px; }
h2 { font-size: 21px; margin: 32px 0 8px; }
.carte { background: var(--carte); border: 3px solid var(--texte); border-radius: 20px; box-shadow: 6px 6px 0 var(--texte); padding: 20px; margin: 20px 0; }
.illus { width: 100%; border-radius: 20px; border: 3px solid var(--texte); box-shadow: 6px 6px 0 var(--texte); }
.doux { color: var(--doux); font-size: 15px; }
a { color: var(--violet); }
ul { padding-left: 22px; }
footer { margin-top: 48px; color: var(--doux); font-size: 14px; }

/* Page d'accueil */
.accueil main { max-width: 1040px; }
.accueil h2 { font-size: 30px; line-height: 1.2; margin: 72px 0 12px; letter-spacing: -0.3px; }
.accueil h3 { font-size: 19px; margin: 12px 0 6px; }
.accueil p { margin: 0 0 8px; }
.intro-section { color: var(--doux); max-width: 620px; margin-bottom: 20px !important; }
.centre { text-align: center; }
.pastille { display: inline-block; background: var(--carte); border: 2px solid var(--texte); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 14px; }
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; margin-top: 32px; }
.hero h1 { font-size: 54px; line-height: 1.05; margin: 16px 0; letter-spacing: -1px; }
.souligne { background: linear-gradient(transparent 62%, var(--soleil) 62%); }
.chapo { font-size: 20px; color: var(--doux); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 16px; }
.bouton { display: inline-block; background: var(--violet); color: #fff; font-weight: 800; padding: 14px 24px; border: 3px solid var(--texte); border-radius: 999px; box-shadow: 4px 4px 0 var(--texte); text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.bouton:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--texte); }
.lien-doux { font-weight: 700; text-decoration: none; }
.rassure { font-size: 15px; color: var(--doux); }
.hero-image { position: relative; max-width: 380px; justify-self: center; width: 100%; }
.carte-photo { width: 100%; border: 3px solid var(--texte); border-radius: 24px; box-shadow: 8px 8px 0 var(--texte); transform: rotate(2deg); display: block; }
.flotte { position: absolute; width: 120px; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.25)); animation: flotte 3.6s ease-in-out infinite; }
.m1 { left: -48px; bottom: 24px; }
.m2 { right: -28px; top: -32px; animation-delay: -1.8s; }
@keyframes flotte { 50% { transform: translateY(-10px) rotate(-3deg); } }
.grille3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grille2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grille2 .carte, .grille3 .carte { margin: 0; }
.etape img { width: 100%; height: 200px; object-fit: contain; background: #FFF9E8; border-radius: 14px; border: 2px solid var(--texte); }
.mascottes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mascottes.six { grid-template-columns: repeat(3, 1fr); }
.mascottes figure { margin: 0; text-align: center; background: var(--carte); border: 3px solid var(--texte); border-radius: 20px; box-shadow: 5px 5px 0 var(--texte); padding: 16px 12px; transition: transform .2s; }
.mascottes figure:hover { transform: rotate(-2deg) translateY(-4px); }
.mascottes img { width: 110px; height: 110px; }
.mascottes figcaption { font-size: 14px; color: var(--doux); }
.mascottes strong { display: block; font-size: 18px; color: var(--texte); }
.bd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--carte); border: 3px solid var(--texte); border-radius: 16px; padding: 10px; box-shadow: 6px 6px 0 var(--texte); }
.case { position: relative; aspect-ratio: 3 / 4; border: 3px solid var(--texte); border-radius: 6px; overflow: hidden; }
.case .decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case .pose { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 72%; }
.recitatif { position: absolute; top: 6px; left: 6px; background: #FFE89A; border: 2px solid var(--texte); font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; }
.bulle { position: absolute; top: 34px; left: 8px; right: 8px; background: #fff; border: 2px solid var(--texte); border-radius: 14px; padding: 6px 9px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.badges { display: flex; flex-wrap: wrap; gap: 16px; }
.badges img { width: 92px; height: 92px; border-radius: 50%; border: 5px solid #FFD23F; box-shadow: 0 0 0 3px var(--texte), 0 0 18px rgba(255,184,0,.6); }
.badges img:nth-child(2n) { border-color: #C9CFD8; box-shadow: 0 0 0 3px var(--texte); }
.badges img:nth-child(3n) { border-color: #D99A5B; box-shadow: 0 0 0 3px var(--texte); }
.plus { display: flex; gap: 24px; align-items: center; margin-top: 72px; background: linear-gradient(135deg, #FFFFFF, #F3EEFF); }
.plus img { width: 150px; flex-shrink: 0; }
.plus h2 { margin-top: 0; }
details { background: var(--carte); border: 3px solid var(--texte); border-radius: 16px; padding: 14px 18px; margin: 12px 0; }
summary { font-weight: 800; cursor: pointer; }
details p { margin-top: 10px !important; color: var(--doux); }
.fin { text-align: center; margin-top: 80px; }
.fin img { width: 130px; animation: flotte 3.6s ease-in-out infinite; }
.fin h2 { margin-top: 8px; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 40px; }
  .hero-image { margin: 0 32px; }
  .flotte { width: 84px; }
  .m1 { left: -36px; }
  .m2 { right: -20px; }
  .grille3, .grille2 { grid-template-columns: 1fr; }
  .mascottes, .mascottes.six { grid-template-columns: repeat(2, 1fr); }
  .bd { grid-template-columns: repeat(2, 1fr); }
  .plus { flex-direction: column; text-align: center; }
  .accueil h2 { font-size: 26px; margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .flotte, .fin img { animation: none; } }
/* La phrase sous les cartes de confiance : de l'air sous les ombres décalées. */
.confiance > p.doux { margin: 32px 0 0 !important; }

/* Mini météo jouable, avec l'appli en vrai à côté */
.telephones { display: flex; justify-content: center; align-items: flex-start; gap: 64px; flex-wrap: wrap; margin-top: 28px; }
.essai-telephone { margin: 0; width: 100%; max-width: 300px; text-align: center; }
.essai-telephone .telephone { transform: rotate(-2deg); }
.essai-telephone figcaption { margin-top: 18px; color: var(--violet); font-size: 15px; font-weight: 800; }
.essai-apercu { margin: 0; text-align: center; width: 100%; max-width: 300px; }
/* Trois téléphones de même taille : l'actu, le jeu jouable au centre, le profil. */
.telephones.trio { gap: 36px; }
.trio .essai-telephone, .essai-capture { margin: 0; width: 100%; max-width: 260px; text-align: center; }
.trio .essai-telephone .telephone { transform: none; }
/* Le téléphone du milieu se joue : halo doré qui respire, pastille « À toi de jouer », légende en bouton. Tout s'éteint au premier toucher. */
.trio .essai-telephone { position: relative; max-width: 280px; margin-top: -14px; }
.trio .essai-telephone .telephone { animation: respire 2.2s ease-in-out infinite; }
.a-toi { position: absolute; z-index: 3; top: -16px; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; background: var(--soleil); color: var(--texte); border: 3px solid var(--texte); border-radius: 999px; box-shadow: 3px 3px 0 var(--texte); padding: 4px 14px; font-weight: 800; font-size: 15px; animation: sautille 1.4s ease-in-out infinite; pointer-events: none; }
.trio .essai-telephone figcaption { display: inline-block; margin-top: 20px; background: var(--violet); color: #fff; border: 3px solid var(--texte); border-radius: 999px; box-shadow: 3px 3px 0 var(--texte); padding: 6px 16px; }
.essai-telephone.joue .telephone, .essai-telephone.joue .a-toi { animation: none; }
.essai-telephone.joue .a-toi { opacity: 0; transition: opacity .4s; }
@keyframes respire { 0%, 100% { box-shadow: 0 0 0 2px #3A3A5C, 0 0 0 6px rgba(255,210,63,.35), 0 24px 50px rgba(27,27,58,.25); } 50% { box-shadow: 0 0 0 2px #3A3A5C, 0 0 0 16px rgba(255,210,63,.7), 0 24px 50px rgba(27,27,58,.25); } }
@keyframes sautille { 0%, 100% { transform: translateX(-50%) rotate(-4deg) translateY(0); } 50% { transform: translateX(-50%) rotate(-4deg) translateY(-6px); } }
.essai-capture .telephone { transform: rotate(-2.5deg); }
.essai-capture:last-child .telephone { transform: rotate(2.5deg); }
.essai-capture .ecran img { display: block; width: 100%; aspect-ratio: 600 / 1279; object-fit: cover; object-position: top; }
.essai-capture figcaption { margin-top: 18px; color: var(--doux); font-size: 15px; font-weight: 700; }
.telephone { background: #16162B; padding: 10px; border-radius: 48px; box-shadow: 0 0 0 2px #3A3A5C, 10px 12px 0 rgba(27,27,58,.22), 0 24px 50px rgba(27,27,58,.25); transform: rotate(2deg); transition: transform .3s; }
.ecran { position: relative; border-radius: 38px; overflow: hidden; background: #FFF4D6; container-type: inline-size; }
.essai-apercu .ecran img { display: block; width: 100%; aspect-ratio: 600 / 1279; object-fit: cover; object-position: top; }
.barre-etat { position: relative; display: flex; justify-content: space-between; align-items: center; height: 12cqw; padding: 0 8cqw; font-size: 4.2cqw; font-weight: 800; letter-spacing: .3px; color: var(--texte); }
.barre-etat::after { content: ""; position: absolute; left: 50%; top: 2cqw; width: 30cqw; height: 8cqw; margin-left: -15cqw; background: #000; border-radius: 99px; }
.tuile-score { position: absolute; left: 3.6cqw; width: 42.4cqw; height: 35cqw; top: 50cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw; background: #FFD23F; border: .9cqw solid var(--texte); border-radius: 5cqw; animation: tuile .6s cubic-bezier(.2,1.6,.4,1); }
.tuile-score[hidden] { display: none; }
.t-emoji { font-size: 9cqw; line-height: 1; }
.t-score { font-size: 11cqw; line-height: 1; }
.t-score small { font-size: 4.5cqw; }
.t-libelle { font-size: 4.2cqw; font-weight: 800; }
@keyframes tuile { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
.essai-apercu figcaption { margin-top: 18px; color: var(--doux); font-size: 15px; font-weight: 700; }
.essai-apercu.allume .telephone { animation: allume 1s ease-out; }
@keyframes allume { 35% { transform: rotate(-1deg) scale(1.05); box-shadow: 0 0 0 2px #3A3A5C, 0 0 0 14px rgba(255,210,63,.55), 0 24px 50px rgba(27,27,58,.25); } }
.essai { text-align: center; padding: 24px 20px; background: linear-gradient(160deg, #FFFFFF, #FFF6D6); }
.essai-pas { color: var(--doux); font-weight: 800; font-size: 14px; }
.essai-question { font-size: 22px; font-weight: 800; margin: 4px 0 16px !important; }
.essai-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.essai-cartes button { font: inherit; font-weight: 800; color: var(--texte); background: var(--carte); border: 3px solid var(--texte); border-radius: 18px; box-shadow: 4px 4px 0 var(--texte); padding: 14px 6px; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.essai-cartes button span { display: block; font-size: 38px; line-height: 1.2; }
.essai-cartes button:hover { background: var(--soleil); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--texte); }
.essai-cartes button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--texte); }
.essai-resultat { animation: apparait .4s ease-out; }
.essai-ciel { font-size: 72px; line-height: 1; margin: 0 !important; animation: rebond .6s ease-out; }
.essai-score { font-size: 20px; }
.essai-score b { font-size: 34px; }
.essai-mascotte { display: flex; align-items: center; gap: 12px; text-align: left; margin: 12px 0; }
.essai-mascotte img { width: 90px; flex-shrink: 0; animation: flotte 3.6s ease-in-out infinite; }
.bulle-site { position: relative; background: #fff; border: 3px solid var(--texte); border-radius: 18px; padding: 10px 14px; font-weight: 600; margin: 0 !important; }
.bulle-site b { display: block; font-size: 14px; color: var(--violet); }
.centre-actions { justify-content: center; margin: 16px 0 8px; }
button.bouton { font: inherit; font-weight: 800; cursor: pointer; }
button.bouton:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--texte); }
.bouton-texte { background: none; border: 0; font: inherit; font-weight: 700; color: var(--violet); cursor: pointer; }
.essai-suite { color: var(--doux); font-size: 15px; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } }
@keyframes rebond { 0% { transform: scale(.3); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Écrans de l'appli dans un téléphone sombre, ombre de couleur, légende en texte */
.captures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 12px 6px 6px; }
.tel { margin: 0; text-align: center; }
.tel-corps { background: var(--texte); padding: 7px; border-radius: 34px; box-shadow: 8px 8px 0 var(--ombre-tel); transform: rotate(var(--penche, -1.5deg)); transition: transform .25s, box-shadow .25s; }
.tel:nth-child(even) .tel-corps { --penche: 1.5deg; }
.tel:hover .tel-corps { transform: rotate(0) translateY(-6px); box-shadow: 10px 14px 0 var(--ombre-tel); }
.tel img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 27px; display: block; background: #FFF9E8; }
.tel img.repli { object-fit: contain; }
.tel figcaption { margin-top: 18px; font-weight: 800; font-size: 17px; line-height: 1.3; }
.tel-vert { --ombre-tel: #2EC4B6; } .tel-rouge { --ombre-tel: #FF5A5F; } .tel-rose { --ombre-tel: #FF8FB1; } .tel-bleu { --ombre-tel: #3A86FF; }

/* Mascottes qui parlent */
.mascottes figure { cursor: pointer; position: relative; }
.mascottes figure:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.dit { margin: 10px 0 0 !important; background: var(--soleil); border: 2px solid var(--texte); border-radius: 14px; padding: 6px 10px; font-size: 14px; font-weight: 700; line-height: 1.35; animation: apparait .3s ease-out; }
.saute img { animation: saute .5s ease-out; }
@keyframes saute { 30% { transform: translateY(-16px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }

/* Jeu à deux */
.duo-section { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.duo-image { width: 100%; max-width: 440px; justify-self: center; }
.duo-image.carte-photo { max-width: 360px; transform: rotate(-2deg); }
.rassure a { color: var(--violet); }

@media (max-width: 760px) {
  .captures { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .duo-section { grid-template-columns: 1fr; gap: 24px; }
  .telephones { gap: 40px; }
  .essai-telephone, .essai-apercu, .essai-capture { max-width: 280px; }
  .trio .essai-telephone { order: -1; }
  .essai-question { font-size: 19px; }
  .essai-cartes button span { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .trio .essai-telephone .telephone, .a-toi, .essai-apercu.allume .telephone, .tuile-score, .essai-mascotte img, .essai-ciel, .saute img, .essai-resultat, .dit { animation: none; } }
/* Avis des testeurs */
.avis blockquote { margin: 0; position: relative; padding-top: 28px; }
.avis blockquote::before { content: "💬"; position: absolute; top: 8px; left: 18px; font-size: 18px; }
.avis p { font-size: 17px; font-weight: 600; }
.avis cite { display: block; margin-top: 8px; color: var(--doux); font-size: 14px; font-style: normal; }

/* Le premier téléphone reprend l'écran « Aujourd'hui » de l'appli, avec la mini météo à la place
   du relevé et les vraies cartes en dessous. Tout se mesure en largeur d'écran (cqw). */
.ecran-jeu { position: relative; aspect-ratio: 100 / 225.2; text-align: left; }
.appli-entete { display: flex; justify-content: space-between; align-items: flex-start; padding: 1cqw 3.6cqw 2.5cqw; }
.appli-entete b { display: block; font-size: 7cqw; line-height: 1.15; }
.appli-date { font-size: 3.9cqw; color: var(--doux); font-weight: 700; }
.appli-pastilles { display: flex; gap: 1.2cqw; flex-shrink: 0; }
.appli-pastilles i { font-style: normal; font-weight: 800; font-size: 3.4cqw; white-space: nowrap; border: .7cqw solid var(--texte); border-radius: 99px; padding: .8cqw 1.8cqw; background: #fff; }
.appli-pastilles i.or { background: var(--soleil); }
.appli-bulle { display: flex; align-items: center; gap: 2.5cqw; padding: 0 3.6cqw 3.5cqw; }
.appli-bulle img { width: 13cqw; flex-shrink: 0; }
.appli-bulle p { margin: 0 !important; background: #fff; border: .8cqw solid var(--texte); border-radius: 4cqw; padding: 2cqw 3cqw; font-size: 3.8cqw; font-weight: 600; line-height: 1.35; }
.appli-carte { margin: 0 3.6cqw; background: #fff; border: .9cqw solid var(--texte); border-radius: 5cqw; box-shadow: 1.5cqw 1.5cqw 0 var(--texte); padding: 3.5cqw 4cqw 4cqw; }
.appli-titre { margin: 0 0 1cqw !important; font-size: 4.2cqw; font-weight: 800; color: var(--doux); }
.appli-bas { display: block; width: 100%; margin-top: 2cqw; }
.appli-onglets { position: absolute; left: 0; bottom: 0; width: 100%; }
.ecran-jeu .essai { margin: 0; padding: 0; background: none; text-align: center; }
.ecran-jeu .essai-pas { font-size: 3.6cqw; margin: 0 !important; }
.ecran-jeu .essai-question { font-size: 5.6cqw; line-height: 1.25; margin: .5cqw 0 3cqw !important; }
.ecran-jeu .essai-cartes { gap: 2.5cqw; }
.ecran-jeu .essai-cartes button { padding: 2.2cqw 1cqw; font-size: 4cqw; border-width: .8cqw; border-radius: 4cqw; box-shadow: 1cqw 1cqw 0 var(--texte); }
.ecran-jeu .essai-cartes button span { font-size: 8cqw; }
.ecran-jeu .essai-cartes button:hover { box-shadow: 1.4cqw 1.4cqw 0 var(--texte); }
.ecran-jeu .essai-ciel { font-size: 13cqw; }
.ecran-jeu .essai-score { font-size: 4.2cqw; margin: .5cqw 0 0 !important; }
.ecran-jeu .essai-score b { font-size: 8cqw; }
.ecran-jeu .essai-mascotte { gap: 2cqw; margin: 2cqw 0; }
.ecran-jeu .essai-mascotte img { width: 14cqw; }
.ecran-jeu .bulle-site { font-size: 3.7cqw; line-height: 1.3; padding: 2cqw 2.8cqw; border-width: .7cqw; border-radius: 4cqw; }
.ecran-jeu .bulle-site b { font-size: 3.2cqw; }
.ecran-jeu .centre-actions { gap: 3cqw; margin: 1cqw 0 0; flex-wrap: nowrap; }
.ecran-jeu .bouton { padding: 2.2cqw 4cqw; font-size: 3.9cqw; border-width: .8cqw; box-shadow: 1cqw 1cqw 0 var(--texte); }
.ecran-jeu .bouton-texte { font-size: 3.9cqw; }
.ecran-jeu .essai-suite { display: none; }

/* Préinscription : champ e-mail et bouton sur une ligne, promesse en dessous, puis Sunny qui saute de joie. */
.actions-prein { flex-direction: column; align-items: flex-start; }
.preinscription { width: 100%; max-width: 480px; }
.fin .preinscription { margin: 20px auto 0; }
.prein-ligne { display: flex; gap: 10px; }
.prein-ligne input { flex: 1; min-width: 0; font: inherit; font-weight: 600; color: var(--texte); background: var(--carte); border: 3px solid var(--texte); border-radius: 999px; padding: 14px 18px; box-shadow: 4px 4px 0 var(--texte); }
.prein-ligne input:focus { outline: 3px solid var(--soleil); outline-offset: 2px; }
.prein-ligne .bouton { flex-shrink: 0; }
.prein-ligne .bouton:disabled { opacity: .6; cursor: wait; }
.prein-promesse { margin: 10px 4px 0; font-size: 14px; color: var(--doux); }
/* Plus précis que « .accueil p », qui collait le texte à l'ombre du champ. */
.preinscription .prein-promesse { margin: 14px 0 0; }
.preinscription .prein-erreur { margin: 10px 0 0; }
.fin .prein-promesse { text-align: center; }
.prein-erreur { margin: 8px 4px 0; font-size: 14px; font-weight: 700; color: var(--accent); }
.prein-merci { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--carte); border: 3px solid var(--texte); border-radius: 20px; box-shadow: 5px 5px 0 var(--texte); padding: 14px 18px; animation: apparait .4s ease-out; }
.prein-merci img { width: 84px !important; flex-shrink: 0; animation: joie 1s ease-out 2 !important; }
.prein-bravo { margin: 0; font-weight: 800; font-size: 18px; }
.prein-merci .prein-promesse { text-align: left; margin: 4px 0 10px; }
.prein-merci .bouton { padding: 10px 18px; font-size: 15px; }
/* Pionniers : l'accès aux tests TestFlight en deux étapes. */
.prein-merci { align-items: flex-start; }
.prein-etapes { margin: 0 0 12px; padding-left: 22px; font-size: 15px; }
.prein-etapes li { margin: 4px 0; }
.prein-merci .prein-tests { background: var(--soleil); color: var(--texte); }
.prein-merci .prein-partager { padding: 0; margin-top: 4px; font-size: 15px; }
@media (max-width: 520px) { .prein-merci { flex-direction: column; align-items: center; } .prein-merci img { width: 64px !important; } }
@keyframes joie { 20% { transform: translateY(-22px) rotate(-10deg) scale(1.08); } 45% { transform: translateY(0) rotate(6deg); } 65% { transform: translateY(-10px) rotate(-4deg); } 85% { transform: translateY(0); } }
@media (max-width: 480px) { .prein-ligne { flex-direction: column; } .prein-ligne .bouton { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .prein-merci, .prein-merci img { animation: none !important; } }

/* Le grand jour (fete.js, jusqu'au 8/11/2026) et l'installation (accueil.js). */
.bandeau-fete { display: block; text-align: center; background: var(--soleil, #FFD23F); color: var(--texte); font-weight: 800; padding: 10px 16px; border-bottom: 3px solid var(--texte); text-decoration: none; }
.bandeau-fete:hover { text-decoration: underline; }
.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confettis i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confetti linear forwards; }
@keyframes confetti { to { top: 110vh; transform: rotate(720deg); } }
.video-sortie { display: flex; justify-content: center; }
.video-sortie video { width: min(360px, 100%); aspect-ratio: 9 / 16; border: 3px solid var(--texte); border-radius: 22px; box-shadow: 6px 6px 0 var(--texte); background: #000; }
.video-baros .revoir-baros { position: relative; width: min(360px, 100%); padding: 0; border: 3px solid var(--texte); border-radius: 22px; box-shadow: 6px 6px 0 var(--texte); background: #000; overflow: hidden; cursor: pointer; aspect-ratio: 9 / 16; }
.video-baros .revoir-baros img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-baros .revoir-baros:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--texte); }
.revoir-pastille { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; background: var(--soleil); color: var(--texte); border: 3px solid var(--texte); border-radius: 999px; padding: 8px 16px; font-weight: 800; box-shadow: 3px 3px 0 var(--texte); }
/* L'intro plein écran de la première visite. */
html.intro-ouverte { overflow: hidden; }
.intro-baros { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(255, 244, 214, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s ease; }
.intro-baros.visible { opacity: 1; }
.intro-cadre { position: relative; width: min(100%, 428px, calc(86vh * 9 / 16)); width: min(100%, 428px, calc(86dvh * 9 / 16)); aspect-ratio: 9 / 16; }
.intro-cadre video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; border: 3px solid var(--texte); border-radius: 22px; box-shadow: 8px 8px 0 var(--texte); background: #000; display: block; }
.intro-boutons { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0 12px; }
.intro-son { font-size: 17px; }
.intro-passer { font: inherit; font-weight: 800; color: var(--texte); background: var(--carte); border: 3px solid var(--texte); border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 3px 3px 0 var(--texte); }
@media (prefers-reduced-motion: reduce) { .intro-baros { transition: none; } }
.installer { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.installer-ligne { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.badge-app-store img { display: block; height: 54px; width: auto; }
.qr-app-store { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--doux, #55557A); }
.qr-app-store img { background: #fff; padding: 6px; border: 3px solid var(--texte); border-radius: 12px; }
.prein-android { width: 100%; max-width: 460px; }
.fin .installer, .fin .installer-ligne { align-items: center; }
@media (prefers-reduced-motion: reduce) { .confettis { display: none; } }
.grand-jour .hero-image .flotte { display: none; }

/* « Bientôt chez les Baros » (bientot.js) : des cartes voilées qui s'éclairent au survol ou au toucher. */
.bientot { position: relative; margin-top: 56px; }
.bientot-tete { position: absolute; top: -46px; right: 8px; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.bientot-mascotte { width: 72px; height: 72px; object-fit: contain; transform: rotate(-8deg); }
.bientot-bulle { max-width: 210px; margin: 0; background: var(--carte); border: 3px solid var(--texte); border-radius: 16px; padding: 6px 10px; font-size: 14px; font-weight: 700; box-shadow: 3px 3px 0 var(--texte); order: -1; }
.bientot-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.bientot-carte { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--texte); background: var(--carte); border: 3px dashed var(--texte); border-radius: 20px; padding: 18px 16px 16px; cursor: pointer; opacity: 0; transform: translateY(14px); filter: saturate(.35); transition: opacity .5s ease, transform .5s ease, filter .25s ease, box-shadow .25s ease; }
.bientot.visible .bientot-carte { opacity: .55; transform: none; }
.bientot.visible .bientot-carte:hover, .bientot.visible .bientot-carte:focus-visible, .bientot.visible .bientot-carte.ouverte { opacity: .95; filter: none; box-shadow: 5px 5px 0 var(--texte); transition-delay: 0s; }
.bientot-badge { position: absolute; top: -12px; right: 12px; background: var(--soleil); border: 2px solid var(--texte); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 800; }
.bientot-emoji { font-size: 34px; line-height: 1.2; }
.bientot-texte { font-size: 15px; color: var(--doux); }
.bientot-secret { font-size: 14px; font-weight: 700; color: var(--violet); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .3s ease; }
.bientot-carte:hover .bientot-secret, .bientot-carte:focus-visible .bientot-secret, .bientot-carte.ouverte .bientot-secret { max-height: 60px; opacity: 1; }
@media (max-width: 700px) { .bientot { margin-top: 32px; } .bientot-tete { position: static; justify-content: flex-end; margin-bottom: -6px; } .bientot-bulle { max-width: 200px; font-size: 13px; } .bientot-mascotte { width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .bientot-carte, .bientot-secret { transition: none; } .bientot-carte { transform: none; } }

/* Pastille « Revoir les Baros » dans l'en-tête (06/11/2026). */
.revoir-baros-pastille { font: inherit; font-weight: 800; font-size: 14px; color: var(--texte); background: var(--soleil); border: 3px solid var(--texte); border-radius: 999px; padding: 4px 12px; box-shadow: 2px 2px 0 var(--texte); cursor: pointer; white-space: nowrap; }
.revoir-baros-pastille:active { transform: translate(2px, 2px); box-shadow: none; }

/* Rangée « 🔜 Bientôt : » sous la pastille « Nouveau » (bientot.js) : l'étiquette, puis les
   pastilles grisées qui s'éclairent au survol. */
.bientot-rangee { margin: 12px 0 4px; max-width: 100%; }
.bientot-etiquette { display: block; margin-bottom: 6px; font-weight: 800; font-size: 14px; color: var(--doux); }
.bientot-puces { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.bientot-puces::-webkit-scrollbar { display: none; }
.bientot-puce { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 2px dashed #9A98B5; border-radius: 999px; background: rgba(255, 255, 255, .45); color: var(--doux); font: inherit; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; transition: border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s; }
.bientot-puce-emoji { filter: grayscale(.6); opacity: .8; transition: filter .18s, opacity .18s; }
.bientot-sablier { font-size: 12px; opacity: .7; }
.bientot-puce:hover, .bientot-puce:focus-visible { border: 2px solid var(--texte); background: var(--carte); color: var(--texte); transform: translateY(-2px); box-shadow: 3px 3px 0 var(--texte); outline: none; }
.bientot-puce:hover .bientot-puce-emoji, .bientot-puce:focus-visible .bientot-puce-emoji { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bientot-puce, .bientot-puce-emoji { transition: none; } .bientot-puce:hover, .bientot-puce:focus-visible { transform: none; } }
.hero-texte { min-width: 0; }
/* Rangée « Bientôt » (correctifs du 06/11/2026) : un bandeau pleine largeur sous l'en-tête ;
   sur ordinateur, étiquette et pastilles sur une seule ligne ; sur téléphone, les pastilles
   défilent avec un fondu à droite qui montre qu'il y en a d'autres. */
.bientot-rangee { margin: 10px 0 0; }
@media (min-width: 768px) {
  .bientot-rangee { display: flex; align-items: center; gap: 12px; }
  .bientot-etiquette { margin-bottom: 0; flex: none; }
  .bientot-puces { flex-wrap: wrap; overflow: visible; padding: 4px 2px; gap: 8px; }
}
@media (min-width: 768px) {
  .bientot-puces .bientot-puce { padding: 5px 11px; font-size: 13px; gap: 5px; }
  .bientot-puces .bientot-sablier { display: none; }
}
@media (max-width: 767px) {
  .bientot-puces { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); scroll-snap-type: x proximity; }
  .bientot-puces.au-bout { -webkit-mask-image: none; mask-image: none; }
  .bientot-puce { scroll-snap-align: start; }
}
/* Bloc d'accueil : l'illustration s'aligne en haut, sur le titre (plus de vide en haut à droite). */
.hero { align-items: start; }
@media (min-width: 768px) { .hero-image { margin-top: 24px; } }
/* « Tu es sur Android ? » sur le même bord gauche que le bouton App Store. */
.installer .lien-android { padding: 0; }
/* Jour J : l'image habituelle sous l'image de fête (fete.js). */
.carte-photo-seconde { margin-top: 28px; transform: rotate(-2deg); }
/* Le nom dans le grand titre (référencement, 06/11/2026) : une petite ligne au-dessus. */
.h1-marque { display: block; font-size: 22px; letter-spacing: 0; color: var(--violet); margin-bottom: 4px; }

/* ─── Accueil 1.1 (08/11/2026, « le site n'est pas à jour avec l'appli ») ───────────────────
   Premier écran : ce qu'est Baromo aujourd'hui, le badge App Store, et l'île en image avec la
   vidéo « Nouveau sur Baromo » en encart. Juste dessous, « Ce que tu trouves dans Baromo » en
   grandes cartes illustrées. La rangée « Bientôt » descend sous ces cartes (bientot.js). */
:root { --violet-texte: #5B3FD9; } /* violet des liens : 6:1 sur le crème (le violet de marque n'y fait que 4:1) */
.accueil a:not(.bouton):not(.badge-app-store), .accueil nav a, .accueil .lien-doux, .accueil .bouton-texte { color: var(--violet-texte); }
.accueil main { overflow-x: clip; } /* les éléments penchés du bord droit ne font jamais défiler la page de côté */
.hero-v2 { grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; margin-top: 24px; }
.hero-v2 h1 { font-size: 46px; line-height: 1.08; margin: 14px 0 12px; }
.hero-sous { font-size: 19px; color: var(--doux); }
.hero-v2 .actions { margin: 18px 0 12px; }
.hero-v2 .rassure { margin-top: 4px; }
.hero-visuel { position: relative; width: 100%; max-width: 460px; justify-self: center; padding: 0 64px 36px 0; }
.hero-ile { position: relative; aspect-ratio: 1; border: 3px solid var(--texte); border-radius: 28px; box-shadow: 8px 8px 0 var(--texte); background: #7FD8E8; transform: rotate(-2deg); }
.hero-ile img { position: absolute; display: block; height: auto; }
.hero-ile .ile-sol { inset: 0; width: 100%; height: 100%; border-radius: 25px; object-fit: cover; }
.hero-ile .ile-phare { left: 6%; top: 8%; width: 25%; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.25)); }
.hero-ile .ile-cabane { left: 36%; top: 28%; width: 27%; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.25)); }
.hero-ile .ile-champ { left: 8%; top: 50%; width: 34%; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.25)); }
.hero-ile .ile-piece { right: -6%; top: -7%; width: 20%; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.3)); animation: flotte 3.6s ease-in-out infinite; }
.hero-video { position: absolute; right: 0; bottom: 0; width: 40%; margin: 0; transform: rotate(4deg); text-align: center; }
.hero-video-cadre { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 3px solid var(--texte); border-radius: 20px; box-shadow: 6px 6px 0 var(--texte); background: #3A6FE0; overflow: hidden; cursor: pointer; }
.hero-video-cadre video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-video-cadre:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--texte); }
.hero-video-cadre:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--texte); }
.hero-video-cadre:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }
.hero-video-son { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; background: var(--texte); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.hero-video figcaption { display: inline-block; margin-top: 8px; background: var(--soleil); color: var(--texte); border: 2px solid var(--texte); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) {
  .hero-v2 { grid-template-columns: 1fr; gap: 20px; margin-top: 12px; }
  .hero-v2 h1 { font-size: 31px; line-height: 1.12; margin: 10px 0 8px; }
  .hero-v2 .h1-marque { font-size: 19px; }
  .hero-v2 .pastille { font-size: 13px; }
  .hero-sous { font-size: 16px; }
  .hero-v2 .actions { margin: 12px 0 8px; }
  .hero-v2 .rassure { font-size: 14px; }
  .hero-visuel { max-width: 360px; padding: 0 56px 30px 0; }
  .hero-video { width: 38%; right: 8px; }
  .hero-video-son { font-size: 11px; padding: 1px 7px; }
  .hero-video figcaption { font-size: 12px; padding: 1px 8px; }
  /* Téléphone : l'île monte juste sous le bouton App Store, les garanties passent dessous. */
  .hero-v2 { row-gap: 0; }
  .hero-v2 .hero-texte { display: contents; }
  .hero-v2 .pastille { justify-self: start; }
  .hero-v2 .hero-visuel { order: 1; margin-top: 8px; }
  .hero-v2 .rassure { order: 2; margin-top: 20px; }
  .hero-v2 .actions > .lien-doux { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-ile .ile-piece { animation: none; } .hero-video-cadre:hover, .hero-video-cadre:active { transform: none; } }

/* « Ce que tu trouves dans Baromo » : grandes cartes illustrées, l'île en tête sur toute la largeur. */
#decouvrir h2 { margin-top: 64px; }
.decouvrir-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.decouvrir-carte { position: relative; margin: 0; display: flex; flex-direction: column; }
.decouvrir-carte p { font-size: 16px; color: var(--doux); }
.decouvrir-illus { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; background: #FFF9E8; border: 2px solid var(--texte); border-radius: 14px; overflow: hidden; margin-bottom: 4px; }
.decouvrir-illus img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.nouveau-1-1 { position: absolute; top: -13px; left: 16px; z-index: 1; background: var(--soleil); color: var(--texte); border: 2px solid var(--texte); border-radius: 999px; padding: 0 10px; font-size: 13px; font-weight: 800; transform: rotate(-3deg); }
.decouvrir-ile { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; background: linear-gradient(135deg, #FFFFFF, #E6FAFF); }
.decouvrir-ile h3 { font-size: 24px; }
.decouvrir-ile p { font-size: 17px; }
.ile-illus { height: 280px; background: #7FD8E8; }
.ile-illus > img:first-child { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.ile-illus .ile-illus-cabane { position: absolute; right: 6%; bottom: 6%; width: 30%; max-height: none; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.3)); }
.ile-illus .ile-illus-champ { position: absolute; left: 6%; bottom: 4%; width: 34%; max-height: none; filter: drop-shadow(3px 4px 0 rgba(27,27,58,.3)); }
@media (min-width: 961px) { .decouvrir-aventure { grid-column: span 2; } } /* 8 cartes + l'aventure en double = 3 rangées pleines */
@media (max-width: 960px) { .decouvrir-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .decouvrir-grille { grid-template-columns: 1fr; gap: 22px; }
  .decouvrir-ile { grid-template-columns: 1fr; gap: 8px; }
  .decouvrir-ile h3 { font-size: 21px; }
  /* Téléphone : image à gauche, texte à droite, pour que les neuf cartes ne fassent pas un kilomètre. */
  .decouvrir-carte:not(.decouvrir-ile):not(.decouvrir-large) { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: start; padding: 16px; }
  .decouvrir-carte:not(.decouvrir-ile):not(.decouvrir-large) .decouvrir-illus { grid-row: 1 / span 2; height: 150px; margin: 0; }
  .decouvrir-carte:not(.decouvrir-ile):not(.decouvrir-large) h3 { margin-top: 0; font-size: 18px; }
  .decouvrir-carte:not(.decouvrir-ile):not(.decouvrir-large) p { font-size: 15px; }
  .decouvrir-large .decouvrir-illus { height: 130px; }
  .ile-illus { height: 220px; }
}
/* Vidéo en grand (video-baros.js) : le bouton Fermer en haut, pour laisser les commandes en bas. */
.intro-boutons-haut { top: 12px; bottom: auto; justify-content: flex-end; }
/* La rangée « Bientôt » sous les cartes : une ligne discrète. */
#decouvrir + .bientot-rangee { margin: 36px 0 0; }

/* Testeurs Android (08/11/2026) : prénom, Gmail, case d'accord, empilés. */
.testeurs { display: grid; gap: 12px; max-width: 480px; }
.testeurs label { font-weight: 700; display: grid; gap: 6px; }
.testeurs input[type=text], .testeurs input[type=email] { font: inherit; font-weight: 600; color: var(--texte); background: var(--carte); border: 3px solid var(--texte); border-radius: 14px; padding: 12px 14px; box-shadow: 4px 4px 0 var(--texte); }
.testeurs input:focus { outline: 3px solid var(--soleil); outline-offset: 2px; }
.testeurs .accord { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.testeurs .accord input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--texte); }
.testeurs .bouton { justify-self: start; }
.testeurs .bouton:disabled { opacity: .6; cursor: wait; }
.bloc-android { text-align: left; }
.bloc-android .bouton { margin-top: 6px; }

/* Pages de référencement « questions à deux » (08/11/2026) : HTML statique, sans script. */
.page-seo h2 { margin-top: 32px; }
.bulle-seo { display: flex; gap: 14px; align-items: center; background: var(--carte); border: 3px solid var(--texte); border-radius: 20px; box-shadow: 5px 5px 0 var(--texte); padding: 12px 16px; margin: 16px 0; }
.bulle-seo img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.bulle-seo p { margin: 0; }
ol.questions { padding-left: 1.6em; }
ol.questions li { margin: 10px 0; line-height: 1.45; }
ol.questions .options { display: block; color: var(--doux); font-size: 15px; margin-top: 2px; }
.installer-seo { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.installer-seo img { display: block; }
.a-lire { padding-left: 1.2em; }
.a-lire li { margin: 8px 0; }
ul.flags { list-style: none; padding: 0; }
ul.flags li { margin: 12px 0; padding: 10px 14px; background: var(--carte); border: 2px solid var(--texte); border-radius: 14px; }
.flag-situation { display: block; font-weight: 700; }
.flag-verdict { display: block; color: var(--doux); font-size: 15px; margin-top: 4px; }
.themes-flags { display: grid; gap: 14px; }
.theme-flag { display: grid; gap: 6px; margin: 0; text-decoration: none; color: var(--texte); }
.theme-flag span { color: var(--doux); font-size: 15px; }
.theme-flag .theme-flag-lien { color: var(--accent); font-weight: 700; }
/* Horoscope (rendu par site/api/horoscope.js). */
.horo-tete { display: flex; gap: 14px; align-items: center; }
.horo-tete img { width: 96px; height: 96px; }
.horo-dates { color: var(--doux); font-size: 15px; margin: 0; }
.horo-jour { color: var(--doux); font-size: 15px; margin: 2px 0 0; text-transform: none; }
.horo-texte { font-size: 18px; line-height: 1.5; }
.horo-indic { display: flex; flex-wrap: wrap; gap: 18px; }
.horo-indic b { letter-spacing: 2px; }
.horo-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.horo-carte { display: grid; gap: 4px; margin: 0; text-decoration: none; color: var(--texte); padding: 14px; }
.horo-carte img { width: 56px; height: 56px; }
.horo-carte span:last-child { font-size: 14px; color: var(--doux); }
.horo-liste { columns: 2; }

/* Pied de page en colonnes (08/11/2026) : réseaux, appli, jouer et lire, Baromo, légal. */
footer.pied { margin-top: 56px; padding-top: 24px; border-top: 3px solid var(--texte); color: var(--texte); font-size: 15px; }
.pied h2 { font-size: 15px; margin: 0 0 8px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin: 6px 0; }
.pied a { color: var(--texte); }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 720px) { .pied-colonnes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .pied-colonnes { grid-template-columns: 1fr; } }
.pied-badge img { display: block; }
.pied-bas { margin: 24px 0 8px; color: var(--doux); font-size: 14px; }
.pied-reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 700; }
ul.reseaux { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
ul.reseaux a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 2px solid var(--texte); border-radius: 50%; background: var(--carte); color: var(--texte); box-shadow: 2px 2px 0 var(--texte); }
ul.reseaux a:hover, ul.reseaux a:focus-visible { background: var(--soleil); }
.suis-baros { text-align: center; margin: 40px 0 0; }
.suis-baros ul.reseaux { justify-content: center; margin-top: 12px; }
.pied nav { display: block; margin: 0; }
.pied nav a, .accueil .pied nav a { color: var(--texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pied ul.reseaux a, .accueil .pied ul.reseaux a, .accueil .suis-baros ul.reseaux a { color: var(--texte); }